如何使用JavaScript在具有ID的td中插入文本

72

我知道这可能很简单，但我不知道。我正在尝试将来自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

— 阿姆拉
source

确保第二个<body>标记实际上是</ body>，并且与结束</ script>标记相同。当您将其放入问题中时，也许这只是一个错字，但您永远不会知道。

— 大卫·科拉

89

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

— 阿龙
source

我必须注意，即<= 9不允许您为表元素做innerHTML

— Denis

@Denis你有理由吗？这是针对表单元格<td>元素而不是整个表或表主体元素完成的。

— artlung 2015年

1

好吧，我承认我的错误，td的innerHTML在ie9中确实有效，但是表中的所有其他元素都是只读stackoverflow.com/a/4729743/1221082

— Denis

照顾内容以避免XSS

— giuseppe

32

追加一个文本节点如下

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

— 乔纳森·芬兰
source

2

该解决方案的重要特征是它不会破坏父元素的当前内容。

— Pistos

14

有几种选择...假设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）

— 数字电视
source

由于某种原因，我得到对象不支持此属性或方法。但是还是谢谢你。

— 阿姆拉

以getElement-> y <-ById开头的任何对象。

— David Kolar 2010年

4

如果您<td>不为空，一种流行的技巧是在其中插入一个不间断的空格 ，例如：

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

然后，您将可以使用：

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

否则，如果您不希望添加无意义的内容&nbsp，则可以使用Jonathan Fingland在其他答案中描述的解决方案。

— 丹尼尔·瓦萨洛（Daniel Vassallo）
source

3

使用jQuery

看看如果这样做，那将是多么容易。

例：

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

— 加布
source

过去的帖子，但仍然：您绝对不应该将jquery用于那些非常简单的事情。jQuery的代码更少。

— luschn

@luschn如果他们的站点已经大量使用了JQuery并且已经加载了该怎么办。您的发言范围很广。决不？

— MH

1

是的，永远不会;）-即使站点已经使用jquery，您也应该使用vanilla js，因为它速度更快。也许您希望早晚删除jquery依赖项。

— luschn

@luschn jQuery的目的之一是消除跨浏览器的问题。根据jquery / js的应用，性能差异不大。

— 加布

跨浏览器问题不再存在任何实际问题。您不应该支持IE8;）-无论如何，对于将一些文本添加到html标签的非常简单的任务，使用jquery imho确实没有意义。人们不是真的那样学习javascript，他们只是学习如何使用在使用相同数量的代码的情况下花费更多下载时间的工具;）-尽管我的意见:)

— luschn