javascript - node.appendChild 在 <= IE9 中的行为不符合预期(尚未检查 10)

Question

我遇到了一个非常奇怪的 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))。
您可以在此处查看一个工作示例:
http://jsfiddle.net/jiggliemon/52ZPR/3/

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

Answer 1

wrapper.innerHTML = ''

似乎损坏了你的内部节点。不要使用它。正确的技巧是

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

这应该可以修复您的错误。

但是除此之外说 innerHTML 是不好的!我无法解释你的错误。

HTML5 specification说:

Remove the child nodes of the node whose innerHTML attribute is being set, firing appropriate mutation events.

所以它确实不应该损坏childNode

作为旁注:

p.textContent = 文本;

与

“相同”

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

进一步说一下这个想法

x.innerHTML = ''

是一种快速清空x的方法，x是谎言。

Benchmark

请对第一个Child使用while循环或设置.textContent = ''