javascript - 使用 forEach 方法修改 dom 元素

Question

我的 html 文档中有一个无序列表，我试图用来自 ajax 请求的文本更新每个列表元素，其中有五个元素。这是我的代码片段:

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);
});

我遇到的问题是只有最后一个列表元素正在更新。为什么会这样？谢谢。

Answer 1

您仅创建 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>