insertAfter

Напишите функцию insertAfter(elem, refElem), которая добавит elem после refElem.

<div>Это</div>
<div>Элементы</div>

<script>
  var elem = document.createElement('div');
  elem.innerHTML = '<b>Новый</b>'

  function insertAfter(elem, refElem) { /* ваш код */ }

  var body = document.body;

  // вставить elem после первого элемента
  insertAfter(elem, body.firstChild); // <--- должно работать

  // вставить elem за последним элементом
  insertAfter(elem, body.lastChild);  // <--- должно работать 
  
</script>

Решение

Для того, чтобы добавить элемент после refElem, мы можем вставить его перед refElem.nextSibling.

Но что если nextSibling нет? Это означает, что refElem является последним потомком своего родители и можем использовать appendChild.

Код:

function insertAfter(elem, refElem) {
    var parent = refElem.parentNode;
    var next = refElem.nextSibling;
    if (next) {
        return parent.insertBefore(elem, next);
    } else {
        return parent.appendChild(elem);
    }
}

Но код может быть гораздо короче, если использовать фишку со вторым аргументом null метода insertBefore:

function insertAfter(elem, refElem) {
    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

Если нет nextSibling, то второй аргумент insertBefore становится null и тогда insertBefore(elem,null) работает как appendChild.

В решении нет проверки на существование refElem.parentNode, поскольку вставка после элемента без родителя — уже ошибка, пусть она возникнет в функции, это нормально.

#77

Реклама

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

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

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