otsikko
Lisätään tänne uutta sisältöä
Väliotsikko
CSS
HTML
<h1>otsikko</h1> <div id="tunniste"> Lisätään tänne uutta sisältöä </div> <h2>Väliotsikko</h2> <div id="tunniste2"> </div>
Javascript
// luodaan uusi elementti let p = document.createElement("p"); // lisätään elementtiin tekstiä textContent-ominaisuudella. Tämä korvaa // aina kaiken elementin mahdollisen olemassaolevan sisällön p.textContent = "kappaleen tekstisisältö"; // p-elementti ei ole vielä missään näkyvissä vaan se täytyy lisätä // johonkin kohtaan dokumenttipuuta // haetaan dokumenttipuusta div-elementti, jonka id on tunniste let div = document.getElementById("tunniste"); // lisätään p-elementti divin lapseksi div.appendChild(p); // tekstiä voidaan lisätä myös tekstinodeina let txt = document.createTextNode("kappaleen toinen tekstisisältö"); // txt-node pitää lisätä p-elementin lapseksi. Teksti tulee jo aiemman // tekstin perään p.appendChild(txt); // noden voi helposti siirtää toiseen paikkaan vain lisäämällä se // dokumenttipuussa uuteen paikkaan let div2 = document.getElementById("tunniste2"); // kokeile seuraavaa //div2.appendChild(txt);
Konsoli