en.javascript.info/2-ui/1-document/12-multi-insert/2-insertadjacenthtml-documentfragment/solution.md
Ilya Kantor 87bf53d076 update
2014-11-16 01:40:20 +03:00

1.2 KiB
Raw Blame History

Подсказки

  • Проверить поддержку `insertAdjacentHTML` можно так:
    if (elem.insertAdjacentHTML) { ... }
    
  • Если этот метод не поддерживается, то сделайте временный элемент, через `innerHTML` поставьте туда `html`, а затем переместите содержимое в `DocumentFragment`. Последнее действие -- вставка в документ.

Решение

<!--+ run -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>5</li>
</ul>

<script>
var ul = document.body.children[0];
var li5 = ul.children[2];

function insertBefore(elem, html) {
  if (elem.insertAdjacentHTML) {
    elem.insertAdjacentHTML("beforeBegin", html);
  } else {
    var fragment = document.createDocumentFragment();

    var tmp = document.createElement('DIV');

    tmp.innerHTML = html;

    while(tmp.firstChild) {
      // перенести все узлы во fragment
      fragment.appendChild(tmp.firstChild);
    }
    elem.parentNode.insertBefore(fragment, elem);
  }
}

insertBefore(li5, "<li>3</li><li>4</li>")
</script>