Промяна на страницата с DOM

Нека разгледаме основните начини за промяна на DOM, първо - най-общо, след това - със специфичен пример от живота.

Създаване и добавяне на елементи

За да създадете нов елемент - използвайте метода document.createElement (тип) .

Добавяне към DOM

Можете да добавите нов елемент към дъщерите на съществуващ елемент, като използвате метода appendChild, който всеки таг има в DOM.

Кодът в следния пример добавя нови елементи към списъка:

Методът appendChild винаги добавя елемента последен в списъка с деца.

Добавяне към определено място

Новият елемент може да бъде добавен не в края на дъщерите, а преди желания елемент.
За да направите това, използвайте метода insertBefore на родителския елемент.

Той работи по същия начин като appendChild, но приема елемент като втори параметър, преди който трябва да вмъкнете.

Например в същия списък добавете елементи преди първата li .

Методът insertBefore ви позволява да вмъкнете елемент навсякъде, освен в края. И appendChild се справя с това. Така че тези методи се допълват взаимно.

Няма метод insertAfter, но необходимата функция е лесна за писане въз основа на комбинацията от insertBefore и appendChild .

Премахване на DOM възел

За да премахнете възел от документ, просто извикайте метода removeChild от неговия родител.

Ако родителят не е под ръка, тогава обикновено се използва parentNode. Оказва се така:

Неудобно, но работи.

Пример - показване на съобщение

Нека направим нещо по-трудно.

Като пример от реалния живот, помислете за добавяне на публикация към страница.
Да се ​​показва в средата на екрана и да бъде по-красива от обикновения сигнал.

Съобщение в HTML версия (както обикновено, можете да го видите, като кликнете върху бутона):

Както можете да видите, съобщението е вложено в DIV с фиксиран размер my-message и се състои от заглавката my-message-title, тялото на my-message-body и бутона OK, който е необходим за затваряне на съобщението.

---