显示孩子的innerHTML

Question

我有：

<td id="td1">
     <div>
          aaaaaa
     </div>
</td>

我如何获得“td1”的孩子的innerHTML？

function displaymessage() {
    var i = 0;
    alert(document.getElementById("td1").childNodes[0].innerHTML);
}

不能工作。

Answer 1

有些浏览器会将换行符解释为第一个childNode。所以你可以这样做：

document.getElementById("td1").childNodes[1].innerHTML

或更安全的方法

document.getElementById("td1").getElementsByTagName('div')[0].innerHTML

[编辑2019 ] 或更现代的

document.querySelector("td1 > div").innerHTML

Answer 2

我讨厌成为使用jQuery来解决每个DOM选择/操作问题的人，但是如果你使用jQuery所有你需要的就是......

function displayMessage() {
    alert($('#td1 > div').html())
}

Answer 3

尝试使用alert（document.getElementById（“td1”）。childNodes [1] .innerHTML）;

Answer 4

很少有浏览器将空格视为文本节点，并且在遍历时会产生问题。

以避免您应该检查节点类型

childNode = document.getElementById("td1").childNodes[0]
if(childNode.nodeType==1)
alert(childNode.innerHTML)

查看更多信息here