10.2 Skapa element
I detta exempel tas det upp några metoder för att skapa nya element och textnoder samt att lägga in dem i den befintliga HTML-strukturen.
10 min.
Sammanfattning
Här följer en kort beskrivning av de fyra kommandon som används i exemplet.
document.createElement()
Med kommandot createElement() skapar man ett nytt HTML-element. Som parameter skickar man med namnet på den typ av element man vill skapa, t.ex. document.createElement("div"). Resultatet blir ett nytt element och därmed en ny nod, men den läggs inte in automatiskt i trädet, utan "hänger fritt" vid sidan om.
document.createTextNode()
Med createTextNode() skapar man en ny textnod. Som parameter kan man skicka med den text som ska läggas in i noden, t.ex. document.createTextNode("En text"). Noden är dock inte kopplad till något element, utan "hänger fritt".
elem.appendChild()
Med appendChild() kopplar man ihop två noder. Det kan t.ex. vara ett element som ska läggas in som underelement (barn) till ett annat element eller en textnod som ska läggas in i ett element. Finns det redan andra noder som är barn till elementet, läggs den nya noden in sist.
Man utgår från föräldraelementet och som parameter skickar man med den nod som ska läggas in, t.ex. elem.appendChild(newNode);
elem.insertBefore()
Med insertBefore() lägger man in en ny nod före en annan nod. Man utgår från föräldraelementet och som parametrar skickar man med den nod som ska läggas in samt noden som den ska läggas in före, t.ex. elem.insertBefore(newNode, beforeNode);
Om den andra parametern är null, läggs den nya noden in sist och resultatet blir detsamma som vid användning av appendChild().
Egna övningar
Övningar kommer i det sista exemplet, ex10.5.