顯示孩子的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)

在這里查看更多信息