JavaScript HTML prvky DOM (uzly)
Přidávání a odebírání uzlů (prvky HTML)
Vytváření nových prvků HTML (uzlů)
Chcete-li přidat nový prvek do HTML DOM, musíte nejprve vytvořit prvek (uzel prvku) a poté jej připojit k existujícímu prvku.
Příklad
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Příklad vysvětlen
Tento kód vytvoří nový <p>
prvek:
const para = document.createElement("p");
Chcete-li k prvku přidat text <p>
, musíte nejprve vytvořit textový uzel. Tento kód vytvoří textový uzel:
const node = document.createTextNode("This is a new paragraph.");
Poté musíte k <p>
prvku připojit textový uzel:
para.appendChild(node);
Nakonec musíte připojit nový prvek k existujícímu prvku.
Tento kód najde existující prvek:
const element = document.getElementById("div1");
Tento kód připojí nový prvek k existujícímu prvku:
element.appendChild(para);
Vytváření nových prvků HTML - insertBefore()
Metoda appendChild()
v předchozím příkladu přidala nový prvek jako poslední podřízený prvek rodiče.
Pokud to nechcete, můžete použít insertBefore()
metodu:
Příklad
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Odstranění stávajících prvků HTML
Chcete-li odstranit prvek HTML, použijte remove()
metodu:
Příklad
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Příklad vysvětlen
Dokument HTML obsahuje <div>
prvek se dvěma podřízenými uzly (dva <p>
prvky):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Najděte prvek, který chcete odstranit:
const elmnt = document.getElementById("p1");
Poté spusťte metodu remove() na tomto prvku:
elmnt.remove();
Tato remove()
metoda nefunguje ve starších prohlížečích, viz příklad níže, jak ji
removeChild()
místo toho použít.
Odebrání podřízeného uzlu
U prohlížečů, které tuto metodu nepodporují remove()
, musíte pro odstranění prvku najít nadřazený uzel:
Příklad
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Příklad vysvětlen
Tento dokument HTML obsahuje <div>
prvek se dvěma podřízenými uzly (dva <p>
prvky):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Najděte prvek pomocí id="div1"
:
const parent = document.getElementById("div1");
Najděte <p>
prvek pomocí id="p1"
:
const child = document.getElementById("p1");
Odebrat dítě od rodiče:
parent.removeChild(child);
Zde je běžné řešení: Najděte dítě, které chcete odebrat, a použijte jeho
parentNode
vlastnost k nalezení rodiče:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Nahrazení prvků HTML
Chcete-li nahradit prvek HTML DOM, použijte replaceChild()
metodu:
Příklad
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>