Как вставить текст в td с id, используя JavaScript

Я знаю, что это может быть просто, но я не могу понять. Я пытаюсь вставить некоторый текст, исходящий из события загрузки функции JavaScript в td.

<html>
 <head>
  <script type="text/javascript">
   function insertText ()
   {
       //function to insert any text on the td with id "td1"
   }
  </script>
 </head>
 <body onload="javascript:insertText()">
  <table>
   <tr>
    <td id="td1">
    </td>
   </tr>
  </table>
 </body>
</html>

Любая помощь?

Ответы

Ответ 1

<html>

<head>
<script type="text/javascript">
function insertText () {
    document.getElementById('td1').innerHTML = "Some text to enter";
}
</script>
</head>

<body onload="insertText();">
    <table>
        <tr>
            <td id="td1"></td>
        </tr>
    </table>
</body>
</html>

Ответ 2

добавить текст node следующим образом

var td1 = document.getElementById('td1');
var text = document.createTextNode("some text");
td1.appendChild(text);

Ответ 3

Существует несколько вариантов: если вы нашли свой TD на var td = document.getElementyById('myTD_ID');, вы можете сделать:

  • td.innerHTML = "mytext";

  • td.textContent= "mytext";

  • td.innerText= "mytext"; - это может не работать вне IE? Не уверен

  • Используйте массив firstChild или children, как отметил предыдущий плакат.

Если это просто текст, который нужно изменить, textContent быстрее и менее подвержен атакам XSS (https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent)

Ответ 4

Если ваш <td> не пуст, один популярный трюк состоит в том, чтобы вставить в него незапланированное пространство &nbsp;, чтобы:

 <td id="td1">&nbsp;</td>

Затем вы сможете использовать:

 document.getElementById('td1').firstChild.data = 'New Value';

В противном случае, если вы не хотите добавить бессмысленный &nbsp, вы можете использовать решение, которое Джонатан Финнгленд описал в другом ответе.

Ответ 5

Использовать jQuery

Посмотрите, как легко было бы, если бы вы это сделали.

Пример:

$('#td1').html('hello world');