Узнайте, как добавить один или несколько элементов HTML с помощью метода appendChild() в JavaScript.
- appendChild() →вы здесь
- добавить()
- append() против appendChild()
1. Добавить элемент с помощью appendChild()
Вот простая HTML-разметка
<section id="box-wrapper"> <div class="box">div <br>1</div> <div class="box">div <br>2</div> <div class="box">div <br>3</div> <div class="box">div <br>4</div> </section>
Когда вы вызываете метод appendChild(), он добавит вновь созданные элементы после последнего дочернего элемента внутри родительского элемента.
Что похоже на метод append().
Но есть несколько ключевых различий между методами append() и appendChild().
const boxWrapper = document.getElementById("box-wrapper");
const box = document.createElement("div");
box.innerHTML = 'div <br> 5';
box.style.backgroundColor = "orange";
box.classList.add("box");
boxWrapper.appendChild(box);
Попробуйте
2. Добавьте несколько дочерних элементов в качестве братьев и сестер
В отличие от метода append() метод appendChild() позволяет добавлять только один элемент в одном запросе.
Если вы хотите добавить больше дочерних элементов для одного и того же родителя, вам нужно будет снова вызвать его с новым элементом в качестве аргумента.
const boxWrapper = document.getElementById("box-wrapper");
const box5 = document.createElement("div");
box5.innerHTML = 'div <br> 5';
box5.style.backgroundColor = "orange";
box5.classList.add("box");
const box6 = document.createElement("div");
box6.innerHTML = 'div <br> 6';
box6.style.backgroundColor = "orange";
box6.classList.add("box");
boxWrapper.appendChild(box5);
boxWrapper.appendChild(box6);
