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

Question

我想使用 nodeValue 属性或 textContentPropery 在 <h1> 标签中的 "Groceries" 旁边添加文本。我添加了两种对 me.Give 我不起作用的方法，这是它没有发生的原因，而不仅仅是答案。我不想在这里使用 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 是一个字符串值，因为您将 header 元素的 nodeValue 分配给它，但是对变量值所做的任何更改都不会反映出来在 header 中，因为字符串不是可变的 object.

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

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;

此处 head 仅包含文本 Groceries。所以你无法访问 groceries.nodevalue

所以你必须使用：

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

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

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

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

Javascript,To add text to element which has a exsisting text-node

html

javascript

dom