Вставка insertAdjacentHTML/DocumentFragment

Напишите функцию insertBeforeHTML(elem, html), которая вставляет HTML-строку html перед элементом elem, используя insertAdjacentHTML, если он поддерживается, а если нет — то через DocumentFragment.

В обоих случаях должна быть лишь одна операция с «живым» DOM.

Следующий код должен вставить два пропущенных элемента списка <li>3</li><li>4</li>:

<ul>
  <li>1</li>
  <li>2</li>
  <li>5</li>
</ul>

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

function insertBeforeHTML(elem, html) {
  /* ваш код */
}

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

Подсказки

Решение

Подсказки

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

Решение

<ul>
  <li>1</li>
  <li>2</li>
  <li>5</li>
</ul>

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

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

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

    tmp.innerHTML = html;
    var child = tmp.firstChild;

    while(child) {
      var next = child.nextSibling;
      fragment.appendChild(child); // child.nextSibling изменится
      child = next; // но мы предварительно скопировали его в next
    }
    elem.parentNode.insertBefore(fragment, elem);
  }
}

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

#461

Вставка insertAdjacentHTML/DocumentFragment

Реклама

Нашли опечатку?

Последние Комментарии

Помоги другим!