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

【问题标题】：How to insert text in a td with id, using JavaScript如何使用 JavaScript 在带有 id 的 td 中插入文本
【发布时间】：2017-07-23 23:32:23
【问题描述】：

我知道这可能是一件简单的事情，但我想不通。我正在尝试将一些来自 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>

有什么帮助吗？

【问题讨论】：

确保第二个标签实际上是，与结束标签相同。也许这只是你在问题中的一个错字，但你永远不会知道。

标签： javascript 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>

【讨论】：

我必须注意，即
@Denis 你有引用吗？这是针对表格单元格 <td> 元素而不是整个表格或表格主体元素完成的。
好吧，我承认我的错误，innerHTML to td 在 ie9 中确实有效，但是表格的所有其他元素都是只读的 stackoverflow.com/a/4729743/1221082
照顾好内容以避免XSS

【解决方案2】：

如下添加一个文本节点

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

【讨论】：

这个方案的重要特点是不会破坏父元素的当前内容。

【解决方案3】：

有多种选择...假设您通过var td = document.getElementyById('myTD_ID'); 找到了您的 TD，您可以这样做：

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)

【讨论】：

由于某种原因，我得到 Object 不支持此属性或方法。不过还是谢谢。
前面有 getElement -> y

【解决方案4】：

如果您的<td> 不为空，一个流行的技巧是在其中插入一个不间断空格&nbsp;，这样：

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

然后你就可以使用了：

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

否则，如果您不想添加无意义的&nbsp，则可以使用 Jonathan Fingland 在the other answer 中描述的解决方案。

【讨论】：

【解决方案5】：

使用jQuery

看看如果你这样做会多么容易。

示例：

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

【讨论】：

旧帖子，但仍然：您永远不应该将 jquery 用于那些非常简单的事情。使用 jquery 的代码甚至更少。
@luschn 如果他们的网站已经大量使用 JQuery 并且已经加载了怎么办。你的陈述非常广泛。从来没有？
是的，从不;) - 即使网站已经使用 jquery，您也应该使用 vanilla js，因为它更快。也许您迟早要删除 jquery 依赖项。
@luschn jquery 的目标之一是消除跨浏览器问题。根据 jquery/js 的应用，性能差异是没有实际意义的。
跨浏览器问题不再存在真正的问题。你不应该支持 IE8 ;) - 无论如何，对于将一些文本添加到 html 标签的非常简单的任务，使用 jquery imho 真的毫无意义。人们并没有真正以这种方式学习 javascript，他们只是学习如何使用一个工具，它只需要更多的下载时间和相同数量的代码；）——不过只是我的看法 :)