Създаване на DOM елементи
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното за създаването на DOM елементи
С JavaScript можете не само да променяте съществуващи елементи, но и да създавате нови и да ги добавяте динамично в страницата. Създаденият елемент първоначално съществува само в паметта и не се визуализира, докато не бъде добавен в DOM дървото. Позицията му зависи от метода, който използвате – дали ще бъде в края на даден контейнер или на точно определено място.
Стъпка по стъпка: създаване и добавяне на елемент
Създайте нов елемент:
document.createElement('div')Запазете го в променлива и го проверете в конзолата – ще видите, че съществува, но още не е в документа.
Добавете го в края на
body:document.body.appendChild(element)За да го поставите в конкретен контейнер (например навигация), използвайте селектор и отново:
parentElement.appendChild(element)Ако искате да го позиционирате преди конкретен елемент, използвайте:
parentElement.insertBefore(newElement, referenceElement)
Основни методи
document.createElement()– създава нов HTML елемент в паметта.appendChild()– добавя елемент като последно дете на избран родител.insertBefore()– добавя елемент преди друг конкретен елемент (приема два параметъра).
Тези методи са в основата на динамичното изграждане на интерфейс и интерактивни уеб приложения.
