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，添加文本到具有現有文本節點的元素

回答

相關問題