javascript - 如何使用 javascript 更改 HTML 元素的值？

Question

我有 DIV，在 div 里面有表格。我想使用 java 脚本更改表的列值之一。我可以通过获取列的元素 id 来做到这一点，但是没有任何 id 分配给任何表的列。下面是示例。

<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle>Talk to me </TD></TR></TBODY></TABLE>
</div>

是否可以使用 javascript 更改“与我交谈”文本？

Answer 1

是的，您需要获取元素，然后将新值设置为element.innerHTML. 如果你给id你想要改变但你不需要的元素，这是最简单的

jsFiddle

<script type="text/javascript">
    var usersec = document.getElementById('usersec');
    var td = usersec.getElementsByTagName('td')[0];
    td.innerHTML = 'New value';
</script>

Answer 2

如果您的用户群是 IE8+，您可以安全地使用querySelector：

var container = document.getElementById('usersec');
var td = container.querySelector('tr:first-child > td');
if(td){
  td.innerHTML = "New Text!";
}

这是一个 JSFIDDLE：http: //jsfiddle.net/rgthree/YkhwE/

querySelector（或querySelectorAll）允许您通过 CSS 语法定位 DOM 中的元素，这非常有用。它在每个当前和以前的浏览器中都得到了很好的支持。（通过我可以使用）

Answer 3

您可以为 TD 分配一个 id，并使用它；

<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle id="cellToChange">Talk to me</TD>
</TR></TBODY></TABLE>
</div>

<script type="text/javascript">
document.getElementById("cellToChange").innerText = "Go on, talk to me please!";
</script>