IEではinnerHTMLで削除したDOMを再利用できない

  • JavaScript

表題の通り、短めのお話。
あるコンテンツ内のデータをいったん削除して配置し直すとき、innerHTML = ''によって削除されたDOMをIEでは再取得できない。

const wrap = document.querySelector('.wrap');
const items = wrap.querySelectorAll('.item');

wrap.innerHTML = '';

items.forEach((item) => {
  wrap.appendChild(item); // Error
});

removeChildを用いることでIEでもDOMを再利用することができる。

const wrap = document.querySelector('.wrap');
const items = wrap.querySelectorAll('.item');

items.forEach((item) => {
  item.parentNode.removeChild(item);
});

items.forEach((item) => {
  wrap.appendChild(item); // Error
});