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

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

javascript html dom

Javascript，将文本添加到具有现有文本节点的元素中,javascript,html,dom,Javascript,Html,Dom,我想使用nodeValue属性或textcontentproperty在标记中的“Groceries”旁边添加一个文本。我添加了两种对我不起作用的方法。请给我一个原因，说明为什么它不会发生，而不仅仅是答案。我不想在此中使用appendChild属性 <body> <h1 id="head">Groceries</h1 ><div id="li-container" ><ul ><l

我想使用

nodeValue

属性或

textcontentproperty

在

标记中的“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>


食品杂货项目2
项目3
项目4
项目5
var list=document.getElementsByTagName（“li”）；
var head=document.getElementById（“head”）.firstChild.nodeValue；
head.nodeValue=head+list.length；
//或
//
var head=document.getElementById（“head”）.firstChild.textContent；
head.textContent=head+list.length；

在您的情况下，

head

是一个字符串值，因为您正在将header元素的值分配给它，但是对变量值所做的任何更改都不会反映在header中，因为该字符串不是可变对象

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

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

演示：

此处的标题仅包含文本

杂货

。因此，您无法访问

杂货店

.nodevalue

因此，您必须使用：

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

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

head

中

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

我们可以使用

textContent

进行更改吗？什么时候应该使用

head.firstChild.nodeValue

。在另一个示例中/code。在进行字符串连接时，必须使用textNode.nodeValue。但在这两个示例中，您都在引用元素时先使用了它。这就是为什么string.nodeValue/string.textContent不存在，因此无法获得所需输出的原因

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