Z JavaScriptom in HTML DOM lahko dodamo ali odstranimo poljuben HTML element (vozlišče).
Ustvarjanje novega HTML elementa (vozlišča)
Da z JavaScriptom in HTML DOM dodamo nov element v HTML dokument, moramo nov element najprej ustvariti, nato pa ga dodamo k obstoječim elementom.
Primer dodajanja novega odstavka:
<article id="clanek">
<p id="p1">To je prvi odstavek.</p>
<p id="p2">To je drugi odstavek.</p>
</article>
<script>
//kreiranje novega odstavka <p>
var odstavek = document.createElement("p");
// kreiranje besedilnega vozlišča odstavka
var besedilo = document.createTextNode("To je nov odstavek.");
//dodajanje besedilnega vozlišča odstavku <p>
odstavek.appendChild(besedilo);
//iskanje obstoječega elementa
var element = document.getElementById("clanek");
//dodajanje novega elementa obstoječemu elementu
element.appendChild(odstavek);
</script>
To je prvi odstavek.
To je drugi odstavek.
Metoda appendChild()
doda nov element kot zadnji element (zadnji otrok staršev). Če želimo dodati element prej, uporabimo metodo insertBefore()
:
<article id="clanek">
<p id="p1">To je prvi odstavek.</p>
<p id="p2">To je drugi odstavek.</p>
</article>
<script>
//kreiranje novega odstavka <p>
var odstavek = document.createElement("p");
// kreiranje besedilnega vozlišča odstavka
var besedilo = document.createTextNode("To je nov odstavek.");
//dodajanje besedilnega vozlišča odstavku <p>
odstavek.appendChild(besedilo);
//iskanje obstoječega elementa
var element = document.getElementById("clanek");
//iskanje prvega odstavka (prvega otroka)
var prviOtrok = document.getElementById("p1");
//dodajanje novega elementa obstoječemu elementu pred prvega otroka
element.insertBefore(odstavek, prviOtrok);
</script>
To je prvi odstavek.
To je drugi odstavek.
Odstranjevanje HTML elementa (vozlišča)
Če želimo odstraniti HTML element, moramo poznati njegovega starša. Za odstranitev elementa uporabimo metodo removeChild()
.
Primer odstranjevanja odstavka:
<article id="clanek">
<p id="p1">To je prvi odstavek.</p>
<p id="p2">To je drugi odstavek.</p>
</article>
<script>
//iskanje starša elementa
var stars = document.getElementById("clanek");
//iskanje otroka, ki ga želimo odstraniti
var otrok = document.getElementById("p1");
//odstranitev elementa
stars.removeChild(otrok);
</script>
To je prvi odstavek.
To je drugi odstavek.
V zgornjem primeru dokument vsebuje članek <article>
z dvema otrokoma (odstavkoma <p>
). Najprej poiščemo članek, nato pa otroka, ki ga želimo odstraniti. Na koncu odstranimo otroka.
Zamenjava HTML elementa (vozlišča)
Če želimo zamenjati HTML element uporabimo metodo replaceChild()
.
Primer zamenjave odstavka:
<article id="clanek">
<p id="p1">To je prvi odstavek.</p>
<p id="p2">To je drugi odstavek.</p>
</article>
<script>
//kreiranje novega odstavka <p>
var odstavek = document.createElement("p");
// kreiranje besedilnega vozlišča odstavka
var besedilo = document.createTextNode("To je nov odstavek.");
//dodajanje besedilnega vozlišča odstavku <p>
odstavek.appendChild(besedilo);
//iskanje starša elementa
var stars = document.getElementById("clanek");
//iskanje otroka, ki ga želimo zamenjati
var otrok = document.getElementById("p1");
//zamenjava elementa (otroka)
stars.replaceChild(stars,otrok);
</script>
To je prvi odstavek.
To je drugi odstavek.