如何使用JavaScript在带有id的td中插入文本

我知道这可能是一件简单的事情,但我无法弄清楚。 我试图插入一些来自JavaScript函数onload事件的文本到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> 

任何帮助?

 <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> 

附加一个文本节点如下

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

有几个选项…假设你通过var td = document.getElementyById('myTD_ID'); 你可以做:

  • td.innerHTML = "mytext";

  • td.textContent= "mytext";

  • td.innerText= "mytext"; – 这个可能无法在IE以外的地方工作? 不确定

  • 使用FirstChild或儿童数组作为以前的海报注意到。

如果只是需要更改的文本,textContent更快,更不容易受到XSS攻击( https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent

如果你的<td>不是空的,一个stream行的技巧就是插入一个非破坏性的空间&nbsp; 在其中,这样:

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

那么你将能够使用:

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

否则,如果你不喜欢增加无意义的东西&nbsp你可以使用乔纳森·芬兰在另一个答案中所描述的解决scheme。

使用jQuery

如果你这样做,看起来多么容易。

例:

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