Question

我想在＆＃34; Groceries＆＃34;旁边添加一个文字。使用<h1>属性或nodeValue在textContentPropery代码中。我添加了两种对我不起作用的方法。给我一个理由，为什么它不会发生，而不仅仅是答案。我不想在此使用appendChild属性。

<body>
    <h1 id="head">Groceries</h1
    ><div id="li-container"
        ><ul
        ><li>item2</li
        ><li>item3</li
        ><li>item4</li
        ><li>item5</li  
        ></ul
    ></div>

<script language="javascript" type="text/javascript">

    var list = document.getElementsByTagName("li");

    var head = document.getElementById("head").firstChild.nodeValue;
    head.nodeValue = head + list.length;

    //OR OR OR OR 
    //
    var head = document.getElementById("head").firstChild.textContent;
    head.textContent = head + list.length;

</script>
</body>

Answer 1

在您的情况下，head是一个字符串值，因为您要为其分配标题元素的nodeValue，但对变量值的任何更改都不会作为字符串反映在标题中不是一个可变对象。

您需要引用文本节点元素并设置其节点值

var list = document.getElementsByTagName("li");
var head = document.getElementById("head").firstChild;
console.log(head)
head.nodeValue = head.nodeValue + list.length;

演示：Fiddle

Answer 2

var head = document.getElementById("head").firstChild.nodeValue;

此处头部仅包含文字Groceries。因此，您无法访问groceries。nodevalue

所以你必须使用：

var head = document.getElementById("head").firstChild;
head.textContent = head.nodeValue + list.length;

在这里，我们首先在head中存储textNode的引用。

在第二行中，我们在textNode中设置textContent。

Javascript，将文本添加到具有现有文本节点的元素

2 个答案: