javascript - node.appendChild在<= IE9中表现异常(未选中10)

我有一个非常奇怪的IE问题，我无法弄清楚根本原因是什么。我希望对内部出现问题的方式进行解释。我可以一次将动态创建的元素附加到另一个元素，但是随后尝试附加该节点都会删除附加到该元素的所有子元素。

我有一个函数创建包装div，然后在子'p'后面附加一些文本。函数本质上是这样的：

function buildElement(text){
  var node,p,doc = document;
  node = doc.createElement('div');
  node.setAttribute('class','node-wrapper');

  p = doc.createElement('p');
  p.appendChild(doc.createTextNode(text));

  node.appendChild(p);
  return node;
}

非常简单。这将构建一个包含您传递到其中的文本的元素。以下是我要执行的操作的缩小版本，并提供了注释来描述IE中正在发生的事情：

// create a parent wrapper element
var wrapper = document.createElement('div');
wrapper.setAttribute('class','parent-wrapper');

var childNode = buildElement('This is a sample');

// This will append a child node with all of its children,
// everything works as expected - ex:
// <div class="parent-wrapper">
//   <div class="node-wrapper">
//     <p>This is a sample</p>
//   </div>
// </div>
wrapper.appendChild(childNode);

// empty the parent wrapper
wrapper.innerHTML = '';

// re-append the childNode element to the parent wrapper
// in IE, this step will fill the parent node with just the node-wrapper element
// with the removed child node(s) - ex:
// <div class="parent-wrapper">
//   <div class="node-wrapper" />
// </div>
wrapper.appendChild(childNode);

如果运行此命令，您将看到的是第一个wrapper.appendChild(childNode)效果很好且符合预期。但是第二次尝试附加子节点将导致将childNode的子节点从childNode中删除。（例如：“ p”消失了。）；
您可以在这里看到一个有效的示例：
http://jsfiddle.net/jiggliemon/52ZPR/

奇怪的是，您可以通过不附加childNode而是附加子节点wrapper.appendChild(childNode.cloneNode(true))的Clone来避免删除子节点。
您可以在这里看到一个有效的示例：
http://jsfiddle.net/jiggliemon/52ZPR/3/

这是一个更详细的示例：
http://jsfiddle.net/jiggliemon/bcSpQ/

最佳答案

wrapper.innerHTML = ''

似乎会损坏您的内部节点。不要使用它。正确的技术是

for (var i = 0, len = wrapper.childNodes; i < len; i++) {
  wrapper.removeChild(wrapper.childNodes[i]);
}

这应该可以解决您的错误。

但是其他话说innerHTML是不好的！我无法解释您的错误。

HTML5 specification说：

删除设置了innerHTML属性的节点的子节点，从而触发适当的突变事件。

因此，它实际上不应该损害childNode

作为旁注：

p.textContent = text;

是相同的

p.appendChild(doc.createTextNode(text));

进一步说，

x.innerHTML = ''

是快速清空x的谎言。

Benchmark

请在firstChild上使用while循环或设置.textContent = ''

关于javascript - node.appendChild在<= IE9中表现异常(未选中10)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7852682/

ChildNode

javascript - node.appendChild在<= IE9中表现异常(未选中10)