JavaScript - rad s DOM elementima. Stvaranje elementa. JavaScript - DOM: dodavanje i uklanjanje čvorova Umetanje elementa u dom javascript

Ako trebate izraditi HTML element, a ne znate kako ga implementirati, onda ste došli na pravo mjesto. U ovom članku nećemo samo pogledati primjer stvaranja elementa, već ćemo napisati i univerzalnu funkciju pomoću koje možete stvoriti novi element, dodati mu razne atribute i ispuniti ga tekstom.

Ali prvo, počnimo s nečim jednostavnim. U izradi novog elementa koristit ćemo metode DOM objekta, naime:

* document.createElement(param) - ova se metoda koristi izravno za stvaranje elementa. Kao parametar uzima naziv elementa koji se stvara Vraća vezu na kreirani element.

document.createElement('div'); // stvorit će element div.

* document.appendChild(param) – ova se metoda koristi za dodavanje elementa u HTML kod. Uzima vezu na kreirani element kao parametar;

var parent = document.getElementsByTagName("BODY"); //dobiti vezu na element tijela

var elem = document.createElement(‘div’);// će stvoriti element div

parent.appendChild(elem);// dodaje element, gdje je parent poveznica na koju će biti dodan naš element, u ovom slučaju to je body body;

* document.createTextNode() - metoda se koristi za postavljanje teksta unutar elementa.

Primjer izrade elementa.

funkcija createElem() (

Var newP = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "myPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

Var text = "tekst za umetanje";

Var textNode = document.createTextNode(text);

NewP.appendChild(textNode);

Parent.appendChild(newP);

U funkciji createElem roditeljska varijabla je referenca na element (tijelo) u koji će novi element biti postavljen. Zatim se kreira novi element P, dodaju mu se atributi id, class, style i postavljaju se vrijednosti tih atributa. Zatim se stvara tekstualni čvor i dodaje našem novom elementu. Nakon svega ovoga, sam element se dodaje tijelu tijela. Za izradu velikog broja novih elemenata morat ćete se jako potruditi, jer... možda ćete ih morati postaviti na različita mjesta na web stranici, npr. pričvrstiti na različite elemente.

Primjer kreiranja elementa pomoću univerzalne funkcije.

Ova funkcija će vam pomoći da stvorite novi element, dodate mu različite atribute, priložite mu tekstualni čvor, postavite ga ispred ili iza navedenog elementa ili zamijenite element novostvorenim elementom. Potreban je samo argument imena.

funkcija createElement(ime, attr, stil, tekst, prošli_id, pozicija, promijenjeno) (

Var parent = document.getElementsByTagName("BODY");

Var e = document.createElement(name);

Ako (attr) (

Za (unesite atribute) (

Ako (ključ == "klasa") (

E.className = attrs;

) else if (ključ == "id") (

E.id = attrs;

) inače (

E.setAttribute(ključ, attr);

Ako (stil) (

Za (ključ u stilu) (

E.style = stil;

Ako (tekst) (

E.appendChild(document.createTextNode(text));

Parent.appendChild(e);

If(past_id)(

Var old_elem = document.getElementById(past_id);

If(position=="before")(

Parent.insertBefore(e,old_elem)

)else if(position=="after")(

InsertAfter(parent,e,old_elem);

If(changed!="" && changes==true)(

Parent.removeChild(old_elem);

Mogućnosti:

Naziv – naziv elementa;

Attrs – atributi kreiranog elementa;

Stil – stilovi kreiranog elementa;

Tekst – umetnuti tekst;

Past_id – id elementa pored kojeg će se nalaziti naš element;

Pozicija - može uzeti dvije vrijednosti prije, poslije;

Changed – zastavica koja ima dvije vrijednosti: true ili false Ako je ovaj parametar postavljen na true, stari element bit će zamijenjen novim;

Kao primjer, stvorimo DIV element s atributima i zamijenimo stari element s novostvorenim.

createElement("div",

("class": "myDivCSSClass", "id": "myDivId","align":"center"),

("width": "200px", "height": "250px", "background": "#3B9D00", "color": "#fff"),

"evo mog teksta",

"test",

"prije"

Zadnja izmjena: 1.11.2015

Za stvaranje elemenata, objekt dokumenta ima sljedeće metode:

createElement(elementName) : Stvara html element čija se oznaka prosljeđuje kao parametar. Vraća kreirani element

createTextNode(text) : Stvara i vraća tekstualni čvor. Tekst čvora prosljeđuje se kao parametar.

Dakle, varijabla elem će pohraniti referencu na element div. Međutim, jednostavno stvaranje elemenata nije dovoljno, potrebno ih je dodati na web stranicu.

Za dodavanje elemenata možemo koristiti jednu od metoda objekta Node:

appendChild(newNode) : dodaje novi čvor newNode na kraj kolekcije podređenih čvorova

insertBefore(newNode, referenceNode) : dodaje novi čvor newNode prije referentnog čvora

Koristimo metodu appendChild:

Naslov članka

Prvi paragraf

Drugi paragraf

Najprije stvaramo obični h2 element zaglavlja i tekstualni čvor. Zatim dodajemo tekstualni čvor elementu zaglavlja. Zatim dodajemo naslov jednom od elemenata web stranice:

Međutim, ne moramo stvoriti dodatni tekstualni čvor da bismo definirali tekst unutar elementa, budući da možemo koristiti svojstvo textContent i izravno mu dodijeliti tekst:

Var elem = document.createElement("h2"); elem.textContent = "Zdravo svijete";

U ovom slučaju, tekstualni čvor će biti kreiran implicitno kada se postavi tekst.

Sada pogledajmo kako dodati sličan element na početak zbirke podređenih čvorova div bloka:

Var articleDiv = document.querySelector("div.article"); // kreiraj element var elem = document.createElement("h2"); // kreiraj tekst za njega var elemText = document.createTextNode("Hello world"); // dodaj tekst elementu kao dijete elem.appendChild(elemText); // dobivanje prvog elementa ispred kojeg će stajati dodatak var firstElem = articleDiv.firstChild.nextSibling; // dodaj element u div blok prije prvog čvora articleDiv.insertBefore(elem, firstElem);

Ako trebamo umetnuti novi čvor na drugo, treće ili bilo koje drugo mjesto, tada moramo pronaći čvor ispred kojeg trebamo umetnuti koristeći kombinacije svojstava firstChild/lastChild i nextSibling/previousSibling.

Ponekad su elementi prilično složeni u sastavu i mnogo ih je lakše kopirati nego iz njih stvarati sadržaj pomoću zasebnih poziva. Za kopiranje postojećih čvorova iz objekta Node, možete koristiti metodu cloneNode():

Var articleDiv = document.querySelector("div.article"); // kloniraj element articleDiv var newArticleDiv = articleDiv.cloneNode(true); // dodavanje na kraj elementa tijela document.body.appendChild(newArticleDiv);

Metodi cloneNode() prosljeđuje se Booleova vrijednost kao parametar: ako se proslijedi true, element će se kopirati sa svim podređenim čvorovima; ako se proslijedi false, tada se kopira bez podređenih čvorova. To jest, u ovom slučaju kopiramo čvor sa svim njegovim sadržajem i zatim ga dodajemo na kraj elementa tijela.

Da biste uklonili element, pozovite metodu removeChild() objekta Node. Ova metoda uklanja jedan od podređenih čvorova:

Var articleDiv = document.querySelector("div.article"); // pronađite čvor koji ćemo izbrisati - prvi paragraf var removableNode = document.querySelectorAll("div.article p"); // uklanjanje čvora articleDiv.removeChild(removableNode);

U ovom slučaju, prvi odlomak se uklanja iz div bloka

Za zamjenu elementa upotrijebite metodu replaceChild(newNode, oldNode) objekta Node. Ova metoda uzima novi element kao prvi parametar, koji zamjenjuje stari element oldNode proslijeđen kao drugi parametar.

Var articleDiv = document.querySelector("div.article"); // pronađite čvor koji ćemo zamijeniti - prvi paragraf var oldNode = document.querySelectorAll("div.article p"); // kreiraj element var newNode = document.createElement("h2"); // kreiraj tekst za njega var elemText = document.createTextNode("Hello world"); // dodaj tekst elementu kao podređeni element newNode.appendChild(elemText); // zamijeni stari čvor novim articleDiv.replaceChild(newNode, oldNode);

U ovom slučaju, prvi paragraf zamjenjujemo naslovom h2.

U ovom postu želim vam reći kako dodati ili ukloniti element iz objekta u JavaScriptu. Vrlo je jednostavno, ali mnogi početnici, poput mene prije, često se zbune oko toga.

Imamo jednostavan objekt koji sadrži podatke kao što su ime, prezime i web stranica. Podaci mogu biti apsolutno bilo što, ali za potrebe ovog posta bit će upravo to.

Gornji kod je jasan, ali samo da pojasnimo: možete dodati nove vrijednosti objektu u sintaksi objekta koristeći "." i ključ ili uobičajeni format polja. Ako ga deklarirate kao niz, onda je obj još uvijek objekt, jer ste ga prethodno tako označili zahvaljujući () .

Dodajmo sada neke podatke tamo:

Obj.other_obj.first = "prvi ključ novog objekta"; obj.other_obj.second = "drugi";

Stvorili smo dvije nove vrijednosti, prvu i drugu, unutar other_obj.

Možete koristiti delete, koji može ukloniti elemente iz objekata. Ne možete izbrisati cijeli objekt na ovaj način, ali ako morate, možete učiniti ovo:

Obj = (); // Ponovno čini objekt praznim

To je sve, ako još uvijek imate pitanja o objektima u JavaScriptu, napišite komentar ispod, pokušat ću vam pomoći.

Korak 1. Pripremite elemente:

Korak 2. Dodajte nakon:

JavaScript ima insertBefore(), ali kako mogu umetnuti element nakon drugi element bez korištenja jQueryja ili druge biblioteke?

Dodati:

Element.parentNode.insertBefore(noviElement, element);

Dodaj nakon:

Element.parentNode.insertBefore(newElement, element.nextSibling);

Stvaranjem sljedećih prototipova, moći ćete pozvati ovu funkciju izravno iz novostvorenih elemenata.

noviElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) Prototip

Element.prototype.appendBefore = funkcija (element) ( element.parentNode.insertBefore(this, element); ),false;

.appendAfter(element)Prototip

Element.prototype.appendAfter = funkcija (element) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

/* Dodaje Element PRIJE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Dodaje element NAKON NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Tipična izrada i postavljanje novog napuštenog objekta elementa */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Novi element"; NewElement.id = "NoviElement"; /* Dodaj NewElement PRIJE -ILI- NAKON korištenja gore navedenih prototipova */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( text-align: center; ) #Neighborhood (color: brown; ) #NewElement (color: green; ) Neighbor 1 Neighbor 2 Neighbor 3

U idealnom slučaju, insertAfter bi trebao raditi slično MDN-u. Kod u nastavku će učiniti sljedeće:

• Ako nema djece, dodaje se novi čvor
• Ako ne postoji referentni čvor, dodaje se novi čvor
• Ako nakon referentnog čvora postoji čvor, dodaje se novi čvor
• Ako referentni čvor tada ima djecu, tada se novi čvor umeće prije tog brata
• Vraća novi čvor

Proširenje čvora

Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; );

Jedan opći primjer

Čvor.parentNode.insertAfter(noviČvor, čvor);

Pogledajte kod koji se izvodi

// Prvo proširite Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "Prva nova stavka"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Druga nova stavka"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Treća nova stavka"; newNode.style.color = "#FF0000"; referentniČvor.roditeljskiČvor.insertAfter(noviČvor, referentniČvor); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Četvrta nova stavka"; newNode.style.color = "#FF0000"; referentniČvor.roditeljskiČvor.insertAfter(noviČvor, referentniČvor); Nema djece Nema referentnog čvora

• Prva stavka

• Prva stavka

• Prva stavka
• Treća stavka

Metoda insertBefore() koristi se kao parentNode.insertBefore() . Da bismo emulirali ovo i napravili metodu parentNode.insertAfter(), možemo napisati sljedeći kod.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // temeljeno na rješenju karima79); // dobivanje potrebnih ručica var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // stvaranje

paragraf tri

paragraf jedan

paragraf dva

Imajte na umu da DOM proširenje može biti pogrešna odluka za vas, kao što je navedeno u ovom članku.

Međutim, ovaj je članak napisan 2010. i sada bi stvari mogle biti drugačije. Pa odlučite sami.

Omogućuje vam da se nosite sa svim scenarijima

Funkcija insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild(newNode); else if (!referenceNode.nextSibling) document.body.appendChild(newNode); else referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); )

Ovaj kod radi na umetanju elementa veze odmah nakon zadnjeg postojećeg podređenog umetanja za umetanje male css datoteke

Var raf, cb=function())( //stvori novi čvor var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //umetnite nakon zadnjeg čvora var nodes=document.getElementsByTagName("link"); //postojeći čvorovi var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode. sljedeći brat/sestra); ); //provjeri prije umetanja pokušaj ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Znam da već ima previše odgovora na ovo pitanje, ali nijedan od njih nije ispunio moje točne zahtjeve.

Trebam funkciju koja ima točno suprotno ponašanje od parentNode.insertBefore - to jest, trebala bi prihvatiti null referenceNode (koji se ne prihvaća kao odgovor) i gdje će insertBefore umetnuti u kraj umetnutiprije koje bi trebao umetnuti u početak, budući da inače ne bi uopće bilo načina za lijepljenje na izvornu lokaciju s ovom funkcijom; iz istog razloga insertBefore umeće na kraju.

Budući da null referenceNode zahtijeva od vas da insertBefore nadređenog, moramo znati nadređenog - insertBefore je metoda parentNode, tako da ima pristup nadređenom parentNode na taj način; naša funkcija ne postoji, pa moramo proći nadređeni element kao parametar.

Rezultirajuća funkcija izgleda ovako:

Funkcija insertAfter(parentNode, newNode, referenceNode) ( parentNode.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: parentNode.firstChild); )

If (! Node.prototype.insertAfter) ( Node.prototype.insertAfter = function(newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); ); )

node1.after(node2) stvara,

gdje su čvor1 i čvor2 DOM čvorovi.

U ovoj lekciji naučit ćemo kako stvoriti čvorove elementa (createElement) i tekstualne čvorove (createTextNode). Također ćemo razmotriti metode dizajnirane za dodavanje čvorova u stablo (appendChild, insertBefore) i za uklanjanje čvorova iz stabla (removeChild).

Dodavanje novog čvora u stablo obično se provodi u 2 faze:

• createElement() - stvara element (čvor) sa navedeno ime(označiti). Metoda createElement(element) ima jedan obavezni parametar (element) - ovo je niz koji sadrži naziv elementa (oznaku) koji treba stvoriti. Naziv elementa (tag) u parametru mora biti napisan velikim slovima. Kao rezultat ovu metodu vraća element koji je kreiran.
• createTextNode() - stvara tekstualni čvor s navedenim tekstom. Metoda createTextNode(text) ima jedan obavezni parametar (tekst) - ovo je niz koji sadrži tekst tekstualnog čvora. Kao rezultat, ova metoda vraća tekstualni čvor koji je stvoren.

Rad s postojećim čvorovima pomoću metoda appendChild() i insertBefore() također se provodi u 2 faze:

Na primjer, dodajte postojeći li element koji sadrži tekst "Tablet" na početak popisa (ovo će ga ukloniti s prethodnog mjesta):

//dobijte UL element koji sadrži popis prema njegovom id-u var elementUL = document.getElementById("list"); //dobijte li element koji sadrži tekstualni čvor "Tablet" var elementLI = elementUL.childNodes; //dodavanje elementa na početak liste //u ovom slučaju on će biti uklonjen sa svoje originalne lokacije elementUL.insertBefore(elementLI,elementUL.firstChild);

• U dokumentu postoje dva popisa. Morate premjestiti elemente s druge liste na prvu.
• Napravite popis, tekstualno polje i 2 gumba. Napišite kod u JavaScriptu koji, ovisno o pritisnutom gumbu, dodaje tekst u tekstualnom polju na početak ili kraj liste.

Uklanjanje čvora iz stabla provodi se u 2 faze:

//pronađi čvor koji želimo izbrisati var findElement = document.getElementById("notebook"); //pozovite metodu removeChild na nadređenom čvoru //i proslijedite joj pronađeni čvor kao parametar findElement.parentNode.removeChild(findElement);

Na primjer, uklonite zadnji podređeni element elementa koji ima id="myID" :

//dobijte element koji ima id="myID" var myID = document.getElementById("myID"); //dobijte posljednji podređeni čvor elementa myID var lastNode = myID.lastChild; //jer ne znamo je li posljednji podređeni čvor elementa element, //tada ćemo koristiti while petlja pronaći zadnji podređeni element elementa myID //dok element ima čvor i njegov tip nije 1 (tj. nije element) do while(lastNode && lastNode.nodeType!=1) ( //idite na prethodni čvor lastNode = lastNode.previousSibling; ) //ako smo pronašli element na čvoru myID if (lastNode) ( //tada se mora ukloniti lastNode.parentNode.removeChild(lastNode); )

Na primjer, uklonite sve podređene čvorove elementa koji ima id="myQuestion" :

//dobijte element iz kojeg želimo ukloniti sve njegove podređene čvorove var elementQuestion = document.getElementById("myQuestion"); //dok postoji prvi element while (elementQuestion.firstElement) ( //ukloni ga elementQuestion.removeChild(element.firstChild); )