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

您只创建了一个文本节点，该节点位于每个li元素中，从而导致它从上一个节点移动。

您需要为每次迭代创建一个新节点

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

使用forEach方法修改dom元素

2 个答案: