显示子元素的innerHTML

Question

我有：

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

如何获取“td1”的子元素的innerHTML？

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

无法正常工作。

- hhh3112

Answer 1

有些浏览器将换行解释为第一个childNode。因此，您可以这样做：

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

或者更安全的方法

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

[2019年修订] 或更现代化

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

- KooiInc

Answer 2

我不想成为那个在每个DOM选择/操作问题上都使用jQuery的人，但如果你使用jQuery，你所需要的就是...

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

- Chris W.

---

虽然其他答案在技术上是正确的，但这是其中之一。你必须决定是否要使用jQuery。如果是的话，那么不使用@Chris W的答案就没有意义... - Christian Payne

Answer 3

一些浏览器将空格视为文本节点，在遍历时会产生问题。

为了避免这种情况，您应该检查节点类型。

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

查看更多信息在这里

- Naren Sisodiya

Answer 4

尝试使用alert(document.getElementById("td1").childNodes[1].innerHTML);

- Mahesh KP