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

我想使用nodeValue属性或textContentPropery属性在<h1>标记中的“Groceries”旁边添加文本。我添加了两种不适合我的方法。给我一个原因，不仅仅是答案。我不想在此使用appendChild属性。Javascript，添加文本到具有现有文本节点的元素

<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>

来源

2015-04-06 CoDINGinDARK

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。

来源

2015-04-06 04:01:27 mohamedrias

何时应该使用'head.firstChild.nodeValue'。在其他示例/代码中。 – CoDINGinDARK 2015-04-06 04:10:40

就textNode而言，nodeValue和textContent都会返回相同的值。就在你做字符串连接时，你必须使用textNode.nodeValue。但是在你的两个例子中，你已经在引用元素的时候使用它。这就是为什么string.nodeValue/string.textContent不存在，所以你没有得到所需的输出 – mohamedrias 2015-04-06 04:12:35

在你的情况head是一个字符串值，你要分配头元素，以它的nodeValue，但是任何的变化确实给变量的值将不会反映在标题为字符串不是可变目的。

您需要参考文本节点元素，并将其节点值

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

演示：Fiddle

来源

2015-04-06 03:57:34

我们可以用'textContent'来改变吗？ – CoDINGinDARK 2015-04-06 04:05:42

@JokerSpirit with text content - http://jsfiddle.net/arunpjohny/1do9wrw7/2/ – 2015-04-06 04:07:12

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

回答

相关问题