IT TUTORIJALI | jQuery

JavaScript & DOM - Manipulacija

Manipulacija DOM elementima u JavaScript

Sada kada ste naučili kako odabrati i oblikovati HTML DOM elemente. U ovoj ćete lekciji naučiti kako dinamički dodavati ili uklanjati DOM elemente, uzimati njihov sadržaj itd.

Dodavanje novih elemenata u DOM

Možete eksplicitno kreirati novi element u HTML dokumentu, koristeći metodu document.createElement(). Ova metoda stvara novi element, ali ga ne dodaje u DOM. To ćete morati učiniti u zasebnom koraku, kao što je prikazano u sljedećem primjeru:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
</div>
 
<script>
// Kreiranje novog div elementa
var newDiv = document.createElement("div");
 
// Stvaranje tekstualnog čvora
var newContent = document.createTextNode("Ćao, kako si?");
 
// Dodavanje čvora teksta u novostvoreni div
newDiv.appendChild(newContent);
 
// Dodavanje novostvorenog elementa i njegovog sadržaja u DOM
var currentDiv = document.getElementById("main"); 
document.body.appendChild(newDiv, currentDiv);
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Ugrađivanje novog elementa u DOM</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
  </div>
  
  <button type="button" onclick="insertElement()">Ugrađivanje elementa</button>
  
  <script>
  function insertElement() {
    // Kreiranje novog div elementa
    var newDiv = document.createElement("div");
     
    // Stvaranje tekstualnog čvora
    var newContent = document.createTextNode("Ćao, kako si?");
     
    // Dodavanje čvora teksta u novostvoreni div
    newDiv.appendChild(newContent);
     
    // Dodavanje novostvorenog elementa i njegovog sadržaja u DOM
    var currentDiv = document.getElementById("main"); 
    document.body.appendChild(newDiv, currentDiv);
  } 
  </script>
</body>
</html>

Metoda appendChild() dodaje novi element na kraju bilo koje druge podređene jedinice nadređenog čvora. Međutim, ako želite dodati novi element na početku, možete koristiti metodu insertBefore(), kao što je prikazano u sljedećem primjeru:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
</div>
 
<script>
// Kreiranje novog div elementa
var newDiv = document.createElement("div");
 
// Stvaranje tekstualnog čvora
var newContent = document.createTextNode("Ćao, kako si?");
 
// Dodavanje čvora teksta u novostvoreni div element
newDiv.appendChild(newContent);
 
// Dodavanje novostvorenog elementa i njegovog sadržaja u DOM
var currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);
</script>

Dobijanje ili postavljanje HTML sadržaja u DOM

Sadržaj HTML elemenata takođe možete lako dobiti ili postaviti pomoću svojstva innerHTML. Ovo svojstvo postavlja ili dobija HTML oznake sadržane u elementu, tj. sadržaj između njegovih oznaka za otvaranje i zatvaranje. Pogledajte sljedeći primjer da biste vidjeli kako to funkcioniše:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
</div>
 
<script>
// Dobijanje inner HTML sadržaja
var contents = document.getElementById("main").innerHTML;
alert(contents); // Ispisuje: inner html contents
 
// Postavljanje inner HTML sadržaja
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>Ovo je <em>novo ugrađeni</em> paragraf.</p>";
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Set Inner HTML elemenata</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
  </div>
  
  <button type="button" onclick="getContents()">Nabavite sadržaj</button>
  <button type="button" onclick="setContents()">Postavi sadržaj</button>
  
  <script>
  function getContents() {
    // Dohvatanje inner HTML sadržaja
    var contents = document.getElementById("main").innerHTML;
    alert(contents); // Ispisuje: inner html contents
  }
  function setContents() {
    // Postavljanje inner HTML sadržaja
    var mainDiv = document.getElementById("main");
    mainDiv.innerHTML = "<p>Ovo je <em>novo ugrađeni</em> paragraf.</p>";
  } 
  </script>
</body>
</html>

Kao što vidite lako možete ugraditi nove elemente u DOM koristeći svojstvo innerHTML, ali postoji jedan problem, svojstvo innerHTML zamjenjuje sav postojeći sadržaj elementa. Dakle, ako želite umetnuti HTML u dokument bez zamjene postojećeg sadržaja elementa, možete koristiti metodu insertAdjacentHTML(). Ova metoda prihvata dva parametra: položaj u koji treba umetnuti i HTML tekst. Pozicija mora biti jedna od sljedećih vrijednosti: "beforebegin", "afterbegin", "beforeend" i "afterend". Ova metoda je podržana u svim glavnim pretraživačima. Sljedeći primjer prikazuje vizualizaciju imena položaja i kako funkcioniše.

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->
 
<script>
// Odabir ciljnog elementa
var mainDiv = document.getElementById("main");
 
// Umetanje HTML-a neposredno prije samog elementa
mainDiv.insertAdjacentHTML('beforebegin', '<p>Ovo je prvi paragraf.</p>');
 
// Umetanje HTML-a neposredno unutar elementa, prije njegovog prvog podređenog
mainDiv.insertAdjacentHTML('afterbegin', '<p>Ovo je drugi paragraf.</p>');
 
// Umetanje HTML-a unutar elementa, nakon njegovog posljednjeg podređenog
mainDiv.insertAdjacentHTML('beforeend', '<p>Ovo je treći paragraf.</p>');
 
// Umetanje HTML-a neposredno nakon samog elementa, kao sljedećeg podređenog
mainDiv.insertAdjacentHTML('afterend', '<p>Ovo je četvrti paragraf.</p>');
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Umetanje HTML bez zamjene postojećeg sadržaja</title>
</head>
<body>
    <!-- beforebegin -->
  <div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
  </div>
  <!-- afterend -->
  
  <button type="button" onclick="insertContent()">Umanje sadržaj</button>
  
  <script>
  function insertContent() {
    // Odabir ciljnog elementa
    var mainDiv = document.getElementById("main");
     
    // Umetanje HTML-a neposredno prije samog elementa
    mainDiv.insertAdjacentHTML('beforebegin', '<p>Ovo je prvi paragraf.</p>');
     
    // Umetanje HTML-a neposredno unutar elementa, prije njegovog prvog podređenog
    mainDiv.insertAdjacentHTML('afterbegin', '<p>Ovo je drugi paragraf.</p>');
     
    // Umetanje HTML-a unutar elementa, nakon njegovog posljednjeg podređenog
    mainDiv.insertAdjacentHTML('beforeend', '<p>Ovo je treći paragraf.</p>');
     
    // Umetanje HTML-a neposredno nakon samog elementa, kao sljedećeg podređenog
    mainDiv.insertAdjacentHTML('afterend', '<p>Ovo je četvrti paragraf.</p>');
  } 
  </script>
</body>
</html>

Napomena!

Pozicije beforebegin i afterterend rade samo ako čvor u DOM stablu ima nadređeni element. Takođe, prilikom umetanja HTML-a na stranicu, pripazite da ne koristite korisnički unos koji nije izbjegnut, kako biste spriječili XSS napade.

Uklanjanje postojećih elemenata iz DOM-a

Metodu removeChild() možete koristiti za uklanjanje podređenog čvora iz DOM-a. Ova metoda takođe vraća uklonjeni čvor. Pogledajmo primjer:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
</div>

<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Uklanjanje elemenata iz DOM-a</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
  </div>
  
  <button type="button" onclick="removeElement()">Ukloni element</button>
  
  <script>
  function removeElement() {
    var parentElem = document.getElementById("main");
    var childElem = document.getElementById("hint");
    parentElem.removeChild(childElem);
  }
  </script>
</body>
</html>

Takođe je moguće ukloniti podređeni element bez tačnog poznavanja nadređenog elementa. Jednostavno pronađite podređeni element i koristite svojstvo parentNode da biste pronašli njegov nadređeni element. Ovo svojstvo vraća nadređenog navedenog čvora u DOM stablu. Pogledajmo primjer:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
</div>
 
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>

Zamjena postojećih elemenata u DOM-u

Takođe možete zamijeniti element u HTML DOM-u drugim pomoću metode replaceChild(). Ova metoda prihvata dva parametra: čvor za umetanje i čvor za zamjenu. Ima sintaksu poput parentNode.replaceChild(newChild, oldChild);. Pogledajmo primjer:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
</div>
 
<script>
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
 
// Kreiranje novog elementa
var newPara = document.createElement("p");
var newContent = document.createTextNode("Ovo je novi paragraf.");
newPara.appendChild(newContent);
 
// Zamjena starog paragrafa sa novostvorenim
parentElem.replaceChild(newPara, oldPara);
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Zamijenite element drugim elementom u DOM-u</title>
</head>
<body>
    <div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">Ovo je jednostavan paragraf.</p>
  </div>
  
    <button type="button" onclick="replaceParagraph()">Zamijeni paragraf</button>
  
  <script>
    function replaceParagraph() {
        var parentElem = document.getElementById("main");
        var oldPara = document.getElementById("hint");

        // Kreiranje novog elementa
        var newPara = document.createElement("p");
        var newContent = document.createTextNode("Ovo je novi paragraf.");
        newPara.appendChild(newContent);

        // Zamjena starog paragrafa sa novostvorenim
        parentElem.replaceChild(newPara, oldPara);
    } 
  </script>
</body>
</html>