HTML DOM elementi

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>

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>

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>

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>