Manipulace HTML DOMu pomocí JavaScriptu

Matty
Dec 27, 2020

Co je to vlastně HTML DOM?

  • zkratka DOM znamená (Document Object Model)
  • je možné s ním manipulovat pomocí JavaScriptu
HTML DOM schema
Document Object Model schéma

Přidávání elementu (append, appendChild)

HTML struktura

<body>
<div id="wrapper"></div>
</body>
  1. Inicializace wrapper (obalovacího) elementu
const wrapper = document.getElementById("wrapper");

2. Vytvoření elementu (div | element může být jakýkoli)

const div = document.createElement("div");

3. Přidání obsahu/elementu do divu

div.innerText = "Lorem ipsum dolor sit amet.";
div.innerHTML = "<p>Lorem ipsum dolor sit amet.</p>";

4. Přidání divu do parent elementu (append() — text, element | appendChild() — element)

wrapper.append(div);

Odebírání elementů (remove)

HTML struktura

<body>
<div id="element">Element</div>
</body>

Odebrání elementu pomocí metody remove() — tato metoda odebere element z DOMu

const element = document.getElementById("element");

--

--