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.(например, «р» пропал.);
Вы можете увидеть рабочий пример этого здесь:
http://jsfiddle.net/jiggliemon/52ZPR/

Что странно в том, что вы можете избежатьудаление узла, не добавляя childNode, но добавляя Clone дочернего узла 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]);
}

Это должно исправить вашу ошибку.

Как бы то ни было, тогда говорят "1009" - это плохо! Я не могу объяснить вашу ошибку.

Спецификация HTML5 гласит:

Удалите дочерние узлы узла, чей атрибут innerHTML устанавливается, вызывая соответствующие события мутации.

Так что это действительно не должно быть вредным childNode

Как примечание:

p.textContent = text;

- это то же самое, что и

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

В качестве еще одной идеи,

x.innerHTML = ''

это быстрый способ опустошить x это ложь .

Benchmark

Пожалуйста, используйте цикл while для firstChild или установите .textContent = ''