задачка из учебника learn.javascript.ru на тему insertBefore и appendChild

177

12 марта 2018, 01:06

Напишите функцию insertAfter(elem, refElem), которая добавит elem после узла refElem. как я понимаю нужно вставить elem после первого дива на странице(между двух дивов). но у меня даже с решением которое дают в учебнике, не получается это сделать. спасибо тем, кто потратит на меня время

<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); // <--- должно работать

Answer 1

Дело в том, что firstChild выбирает первый элемент из childNodes, а childNodes возвращает массив состоящий не только из дочерних "теговых" элементов, но и из текстовых. Т.к. сразу после body у нас в html как правило стоит знак переноса строки ("enter"), то и firstChild возвращает #text c nodeValue "↵ ".

Можно использовать node.children[0] чтобы выбрать первый "теговый" элемент и все должно заработать.

<html>
    <head>
    </head>
<body>
    <div>Это</div>
    <div>Элементы</div>
</body>
<script>
    var elem = document.createElement('div');
    elem.innerHTML = '<b>Новый элемент</b>';
    function insertAfter(elem, refElem) {
        refElem.parentNode.insertBefore(elem, refElem.nextSibling);
    }
    var body = document.body;
    insertAfter(elem, body.children[0]); //почти как firstChild
</script>
</html>

Answer 2

Если так важно использовать firstChild, то можно добавить цикл, который будет считать refElem'ом первый "теговый" элемент

function insertAfter(elem, refElem) {
    console.log(refElem.nodeName);
    while (refElem.nodeName == "#text") {//перебирать все элементы сначала до тегового элемента
        refElem = refElem.nextSibling;
    }
    refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите допилить скрипт к Google Таблицам используя API

Нужно составить книгу заявок биржи в виде Google Таблицы - данные из парсинга распределить по колонкам и строчкам, используя скрипт с Public API биржи

219

javascript