Блог

Главная - Вопросы по программированию - ошибка добавления дочернего элемента в определенное место с помощью insertBefore()

ошибка добавления дочернего элемента в определенное место с помощью insertBefore()

#javascript #dom #appendchild

Вопрос:

Я пытаюсь добавить ребенка всегда на 2-й позиции в div, используя метод insertBefore (), это привело к ошибке.

 var j = document.createElement('div');
j.innerHTML = '<p>CreateElement example</p>'
document.insertBefore(j, document.querySelector('.test').children[1]); 
 <div class="test">
  <div class="first">
    <p>hello world</p>
  </div>
  <div class="second">
    <p>lorem</p>
  </div>
  <div class="third">
    <p>Lorem, ipsum dolor.</p>
  </div>
</div>

Ошибка:

Неперехваченное исключение DOMException: Не удалось выполнить «insertBefore» на «Узле»: Узел, перед которым должен быть вставлен новый узел, не является дочерним по отношению к этому узлу.

Ответ №1:

 // First we find parent of elements
const parent = document.querySelector('.test');

// then create new div
var j = document.createElement('div');

// insert new div to parent
j.innerHTML = '<p>CreateElement example</p>'
   parent.insertBefore(j, parent.childNodes[2]); 
     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="script.js" defer></script>
    </head>
    <body>
        <div class="test">
            <div class="first">
                <p>hello world</p>
            </div>
            <div class="second">
                <p>lorem</p>
            </div>
            <div class="third">
                <p>Lorem, ipsum dolor.</p>
            </div>
        </div>
    </body>
    </html>

Комментарии:

1. да, это работает. Чтобы вставить во вторую позицию, не должно ли это быть parent.insertBefore(j, parent.childNodes[1]); так как это массив и 0 индексируется. Я удивлен тем, как parent.insertBefore(j, parent.childNodes[2]); дает ожидаемый результат.

Метки: