JavaScript: Model DOM - Tworzenie i usuwanie elementów · Kurs: JavaScript · Technik informatyk egzamin zawodowy

JavaScript pozwala dynamicznie tworzyć nowe węzły DOM i wstawiać je do drzewa, a także usuwać istniejące. Podstawowe metody to:

• document.createElement(tagName) – tworzy nowy element HTML (np. <li>),
• document.createTextNode(text) – tworzy węzeł tekstowy,
• parent.appendChild(newNode) – dodaje newNode jako ostatnie dziecko węzła parent,
• parent.insertBefore(newNode, referenceNode) – wstawia newNode przed referenceNode,
• parent.removeChild(childNode) – usuwa wskazany węzeł childNode z parent,
• parent.replaceChild(newNode, oldNode) – zastępuje oldNode nowym newNode.

Przykład tworzenia elementów listy

<ul id="lista">
  <li>Element 1</li>
</ul>

<script>
  const lista…