獲取子元素html

Question

我在html中有以下代碼，我需要在javascript中用其他內容修改文本“第二文本”。

<hr id="elemID"><b>First text</b> Second text

在javascript中，我嘗試獲取“ elemID”的子級，並修改其文本：

var elem = document.getElementById('elemID'); 
var child = elem.children[1];
child.innerHTML=\"Other text\";

我不知道認為“第二文本”是“ elemID”的子代是否正確。 如何在不使用<p>元素的情況下完成與所需類似的操作。 我需要“第二文本”與“第一文本”在同一行。

Answer 1

由於<hr>元素是一個自動關閉的元素，因此它將沒有任何子代。 其他元素是兄弟姐妹。 因此，要選擇包含Second text的文本節點，您需要選擇下一個同級，然后選擇此后的下一個：

var elem = document.getElementById('elemID'); 
var textnode = elem.nextSibling.nextSibling;
textnode.textContent = "Other text";

演示版

同樣，在創建字符串時，您不應轉義引號。 因此，請在“ Other text周圍的引號之前刪除反斜杠。

Answer 2

“第二文本”不是HR的子級。 它是上面的父節點的子節點。 如果需要更改“第二個文本”，則應將其包裝在標簽中，並使用它來更改其值。

<hr id="elemID"><b>First text</b> <span id="second">Second text</span>

document.getElementById("second").innerHTML = "Other text";

編輯
所有同時：-) Joeytje50對我來說似乎是最好的。

Answer 3

這應該可以解決問題，將文本節點包裝在您可以識別的<span>元素中：

<hr id="elemID"><b>First text</b><span id='second_text_span'> Second text</span>