Question

<!DOCTYPE html>
<html>
  <body>
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
    <script>
      document.getElementById("p2").nextSibling.nodeValue="9";
    </script>
  </body>
</html>

根据我的理解，document.getElementById("p2")是第二个元素P，然后它的nextSibling应该是第三个元素，我将此元素的文本值设置为“9”，但输出为1,2 ，9,3，但我希望看到1,2,9。

我哪里出错了？为什么我不能使用document.getElementById("p2").nextSibling.innerHTML="9"，因为它只打印什么？

Answer 1

在您的具体示例中，nextSibling是textNode（p#p2和p#p3元素之间的换行符），而不是下一个p元素。您可能希望改为使用nextElementSibling。

另请注意，您希望使用textContent代替nodeValue。

以下是对代码的更改：

＆＃13;

document.getElementById("p2").nextElementSibling.textContent="9";

＆＃13;

<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>

＆＃13;

Answer 2

根据我的理解，document.getElementById（“p2”）是第二个元素P，然后它的nextSibling应该是第三个元素，我将此元素的文本值设置为“9”，但输出为1,2， 9,3，但我希望看到1,2,9。

兄弟姐妹包括ignorable text nodes，而不仅仅是元素。

如何在HTML中使用nextSibling

2 个答案: