使用forEach方法修改dom元素

我在我的html文檔中有一個無序列表，它試圖更新每個列表元素，其中有五個列表元素來自ajax請求的文本。這裏是我的代碼片段：使用forEach方法修改dom元素

var modify = document.getElementsByTagName('li'); 
var modifyText = document.createTextNode(request.responseText); 
var modifiedElements = [].slice.call(modify); 
modifiedElements.forEach(function(elem){ 
    console.log(elem); 
    elem.appendChild(modifyText); 
});

我遇到的問題是隻有最後一個列表元素正在更新。爲什麼會這樣？謝謝。

來源

2016-02-16 kellymandem

如果你確定沒有其他內容在那裏，你可以使用'elem.innerHTML = request.responseText;' – eltonkamami

您正在創建僅1個文本節點，它放置在每個li元素中，導致從前一個節點移動它。

你需要創建一個新的節點，每次迭代

var request = { 
 
    responseText: 'some text' 
 
}; //as a stub 
 
var modify = document.getElementsByTagName('li'); 
 
[].forEach.call(modify, function(elem) { 
 
    var modifyText = document.createTextNode(request.responseText); 
 
    console.log(elem); 
 
    elem.appendChild(modifyText); 
 
});

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

來源

2016-02-16 07:42:19

是'[]'=='Array.prototype'？ – Rayon

結果示例html應該包含字符串''一些文本'' – eltonkamami

不...這是一個空的數組...只是使用Array.prototype.forEach（）的快捷方式 - 我們創建一個空數組並訪問'forEach'方法 –

關於Node.appendChild()方法：

如果給定的孩子是在現有節點的引用文檔， appendChild（）將其從當前位置移動到新位置。 ...所以如果節點已經有父節點，節點首先被刪除，然後附加在新的位置。該Node.cloneNode（）可以用來使節點的副本新父

在這種情況下下追加它之前，你可以使用Node.cloneNode()方法：

var modify = document.getElementsByTagName('li'); 
var modifyText = document.createTextNode(request.responseText); 
var modifiedElements = [].slice.call(modify); 
modifiedElements.forEach(function(elem){ 
    console.log(elem); 
    elem.appendChild(modifyText.cloneNode()); 
});

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

來源

2016-02-16 07:48:05 RomanPerekhrest

使用forEach方法修改dom元素

回答

相關問題