appendChild не работает

155

13 мая 2019, 09:10

Мне нужно добавить div, p или hr (любой элемент) после каждого p, но есть некоторые проблемы.

У меня есть код JS, и я получаю ошибку appendChild is not a function.

В чем проблема?

var parent = document.getElementsByTagName("article")[0]; 
var paragraph = parent.getElementsByTagName("p"); 
var newElement = document.createElement("hr"); 
paragraph.appendChild(newElement);

<article> 
  <div>div with text</div> 
  <p>paragraph with text</p> 
</article>

Answer 1

Ошибка у вас возникает, из-за того, что у вас в переменной paragraph находиться не сам элемент, а коллекция - HTMLCollection. Даже если у вас один элемент на странице с таким тегом, то все равно вернется коллекция. Если не ошибаюсь, то единственным исключением является document.getElementById().

В примере ниже видно, что ваш элемент храниться под числовым индексом: 0. По этому вам нужно переменной paragraph присвоить значение: parent.getElementsByTagName("p")[0];, как вам предложил это сделать Igor в комментариях.

var parent = document.getElementsByTagName("article")[0]; 
var paragraph = parent.getElementsByTagName("p"); 
console.log(paragraph);

<article> 
  <div>div with text</div> 
  <p>paragraph with text</p> 
</article>

Element.getElementsByTagName()

Element.getElementsByTagName() метод возвращает живую коллекцию элементов HTMLCollection , учитывая имя тэга. Поиск осуществляется в поддереве указанного элемента, в результат поиска не попадает сам элемент, в поддереве которого осуществлялся поиск. Возвращает живой список, который автоматически обновляется при изменении DOM. Поэтому не нужно вызывать метод Element.getElementsByTagName() несколько раз с одними и теми же аргументами, содержимое списка обновляется автоматически.

При вызове на HTML-элементе в HTML-документе метод getElementsByTagName переводит аргумент по которому осуществляется поиск (имя тега) в нижний регистр до того как начать поиск. Это нежелательно, когда необходимо использовать метод для поиска SVG элементов, где в наименовании тега может использоваться верблюжья (camel-cased) нотация. В этом случае правильно использовать метод Element.getElementsByTagNameNS().

Element.getElementsByTagName похож на Document.getElementsByTagName(), за исключением того, что поиск осуществляется среди потомков конкретного элемента, а не во всём HTML-документе.

Источник: Element.getElementsByTagName().