Lisätään tänne uutta sisältöä
CSS
HTML
<div id="tunniste"> Lisätään tänne uutta sisältöä </div>
Javascript
let omat = document.getElementById("tunniste"); // luodaan uusi h2-elementti let h2 = document.createElement("h2"); h2.textContent = "Väliotsikko"; let div = document.getElementById("tunniste"); // lisätään h2-elementti dom-puuhun div.appendChild(h2); // tehdään h2-elementistä identtinen klooni // jos parametrina ei anneta true, niin sisältöä ei kloonata let h2_klooni = h2.cloneNode(true); // lisätään myös klooni puuhun div.appendChild(h2_klooni); // luodaan h3-elementti let h3 = document.createElement("h3"); h3.textContent = "Kolmannen tason otsikko"; // lisätään h3-elementti dom-puuhun ennen h2-kloonia div.insertBefore(h3, h2_klooni); // poistetaan alkuperäinen h2 dokumenttipuusta div.removeChild(h2); // korvataan divin firstChild eli siellä alunperin ollut teksti // h2-elementillä. replaceChild palauttaa korvatun noden // edeltävää removeChildia ei tarvitse tehdä let teksti = div.replaceChild( h2, div.firstChild); // lisätään korvattu node divin viimeiseksi lapseksi div.appendChild(teksti); // edellä tehdyn voisi tehdä myös seuraavasti eli lisätään divin viimeiseksi // divin ensimmäinen lapsi. Tämä automaattisesti ensin poistaa firstChildin // ja lisää sen sitten viimeiseksi eli tämä on käytännössä noden siirtäminen // dom-puussa toiseen paikkaan // div.appendChild( div.firstChild );
Konsoli