获取子元素html

Question

我在html中有以下代码，我需要在javascript中修改文本“Second text”和其他内容。

<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";

Demo

此外，在创建字符串时，不应该转义引号。因此，请从Other text周围的引号前删除反斜杠。

Answer 2

“第二文”不是人力资源的孩子。它是上面的父母的子节点。 如果您需要更改“第二个文本”，则应将其包装在标记中并使用它来更改它的值。

<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>