如何更改带有 childNodes (Javascript) 的元素的内容？

Question

如何更改带有子节点 (Javascript) 的元素的内容？我尝试了一些但没有用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Zitat</title>
        <script type="text/javascript">
            var htmlNode = document.documentElement;
            var emNode = htmlNode.childNodes[1].childNodes[0].childNodes[1].childNodes[1];
            emNode.innerHtml = "BBB";
        </script>
    </head>
    <body>
        <ul>
            <li>Hello World</li>
            <li>AAA <em>DDD</em> CCC.</li>
        </ul>
    </body>
</html>

Answer 1

首先，脚本标签应该放在标记之后，否则它将运行在您尝试修改的实际 html 实际呈现之前。其次，我认为您的选择器是错误的。 childNodes 是 DOM 个有效的属性个对象，但是你的链中有一个错误。第三，我会使用 document.querySelector 来定位元素，而不是 childNodes 链。最后，使用 innerHTML（不是 innerHtml）设置 html 内容，或者 textContent 如果它是您尝试更新的文本节点。

MDN Docs on innerHTML

Answer 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Zitat</title>
        <script>
            document.addEventListener("DOMContentLoaded", function (event) {
                var arrAllListTags = document.querySelectorAll("li");
                arrAllListTags[1].childNodes[1].textContent = "BBB";
            });
        </script>
    </head>
    <body>
        <ul>
            <li>Hello World</li>
            <li>AAA <em>DDD</em> CCC.</li>
        </ul>
    </body>
</html>

如何更改带有 childNodes (Javascript) 的元素的内容？

How to change the content of an element with childNodes (Javascript)?

javascript

child-nodes