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

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

本文关键字：文本 节点 元素 添加 Javascript      更新时间：2023-09-26

我想使用nodeValue属性或textContentPropery在<h1>标记中的"Groceries"旁边添加一个文本。我添加了两种对我不起作用的方法。给我一个为什么没有发生的原因，而不仅仅是答案。我不想在此使用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>

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。

在您的情况下，head是一个字符串值，因为您将头元素的nodeValue分配给它，但对变量值所做的任何更改都不会反映在头中，因为字符串不是可变对象。

您需要参考文本节点元素并设置其节点值

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

演示：Fiddle

相关文章：