Javascript dodaje dom element. Kreiranje, dodavanje i uklanjanje elemenata HTML stranice

24.08.2023

Ovo je četvrti dio postova posvećenih izvornim ekvivalentima jQuery metoda. Možda biste željeli ovo pročitati prije nego što nastavite.

U ovom članku ćemo pogledati načine za kreiranje, umetanje, premještanje i brisanje elemenata. I iako jQuery već sadrži veliki broj korisnim metodama, iznenadit ćete se kada saznate da se sve ovo može lako uraditi korištenjem prirodnih metoda.

Manipulacije sa HTML kodom elemenata

jQuery

// dobijemo var html = $(elem).html(); // postavi $(elem).html("

Novi html

");

Native JS

// get var html = elem.innerHTML; // postavi elem.innerHTML = "

Novi html

Manipulacija tekstom elementa

jQuery

// dobijemo var text = $(elem).text(); // set $(elem).text("Novi tekst");

Native JS

// dobijemo var text = elem.textContent; // set elem.textContent = "Novi tekst";

Kreiranje elementa

jQuery

$("

");

Native JS

document.createElement("div");

Dodaje sadržaj na kraj elemenata

jQuery

$(parentNode).append(newNode);

Native JS

parentNode.appendChild(newNode);

Dodaje sadržaj na početak elemenata

jQuery

$(referenceNode).prepend(newNode);

Native JS

referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // ili referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+

Umetni direktno ispred elementa

jQuery

$(referenceNode).before(newNode);

Native JS

referenceNode.parentNode.insertBefore(newNode, referenceNode); // ili referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+

Umetanje direktno iza elementa

jQuery

$(referenceNode).after(newNode);

Native JS

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // ili referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Napomena: 'beforebegin' i 'afterend' će raditi samo ako je referentniNode u DOM stablu i ima roditeljski element.

Pogledajte sljedeće:

ReferenceNode.insertAdjacentElement(pozicija, čvor);

Metoda insertAdjacentElement uzima dva parametra:

pozicija - pozicija u odnosu na referentni čvor, mora biti jedno od sljedećeg:
- 'beforebegin' - Prije samog elementa.
- ‘afterbegin’ — Unutar elementa, prije prvog djeteta.
- 'beforeend' - Unutar elementa, nakon posljednjeg djeteta.
- ‘afterend’ - Nakon samog elementa.
čvor — čvor za umetanje

Tekstualni sadržaj

Some Text

var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("prije", elem2); // rezultat

Some Text

Metoda insertAdjacentElement je čistija i intuitivnija od metode insertBefore, ali je ova druga bolje podržana u starijim pretraživačima.

Dodavanje elemenata više puta

Također je vrijedno napomenuti da će dodavanje elementa čvoru koji se nalazi u DOM stablu dovesti do ponovnog crtanja. Ovo nije baš dobro jer pretraživač mora ponovo izračunati veličinu i poziciju novog elementa, što će takođe dovesti do promena na potomcima, precima elementa i elementima koji se pojavljuju nakon njega u DOM-u. Ako dodajete mnogo elemenata u DOM, ovo može potrajati.

Da biste to izbjegli, možete ga dodati pomoću DocumentFragmenta. Fragment dokumenta je objekt dokumenta koji postoji samo u memoriji, tako da dodavanje u njega neće uzrokovati nikakvo ponovno postavljanje.

Recimo da trebamo dodati 100 li elemenata elementu ul koji je prisutan u DOM stablu:

// Dobivamo element koji će sadržavati naše stavke var ul = document.querySelector("ul"); // napravimo 100 elemenata liste za (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

U gornjem primjeru, li elementi se dodaju direktno elementu ul, koji se nalazi u DOM stablu, stoga će rezultirati ponovnim crtanjem na svakoj iteraciji - to je 100 promjena!

Hajde da nađemo bolji način.

// Dobivamo element koji će sadržavati naše stavke var ul = document.querySelector("ul"); // kreiramo fragment dokumenta za dodavanje elemenata liste u var docFrag = document.createDocumentFragment(); // napravimo 100 elemenata liste za (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

U istom primjeru, li elementi se dodaju fragmentu dokumenta u memoriji, tako da će se reflow pokrenuti kada se fragment doda elementu ul. Ova metoda će smanjiti broj ponovnih crtanja sa 100 na 1.

Uklanjanje elementa

jQuery

$(referenceNode).remove();

Native JS

referenceNode.parentNode.removeChild(referenceNode); // ili referenceNode.remove(); // FF 23.0+, 23.0+, Edge (bez podrške za IE)

ukloni js element (12)

Korak 1. Pripremite elemente:

var element = document.getElementById("ElementToAppendAfter"); var newElement = document.createElement("div"); var elementParent = element.parentNode;

Korak 2. Dodajte nakon:

elementParent.insertBefore(newElement, element.nextSibling);

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

Jednostavan JavaScript bi bio:

dodati:

Element.parentNode.insertBefore(newElement, element);

Dodaj nakon:

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

Ali, stavite neke prototipove tamo radi lakšeg korištenja

Kreiranjem sljedećih prototipova, moći ćete pozvati ovu funkciju direktno iz novokreiranih elemenata.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) Prototip

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

.appendAfter(element)Prototype

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

A da biste ga vidjeli u akciji, pokrenite sljedeći isječak koda

/* Dodaje element PRIJE NeighborElementa */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(ovo, element); ), false; /* Dodaje element NAKON NeighborElementa */ Element.prototype.appendAfter = function(element) (element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Tipično kreiranje i postavljanje novog objekta bez roditelja */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Novi element"; NewElement.id = "NoviElement"; /* Dodaj NewElement PRIJE -ILI- NAKON upotrebe gore navedenih prototipova */ NewElement.appendAfter(document.getElementById("Neighbor2"));

div (text-align: center; ) #Neighborhood (boja: smeđa; ) #NewElement (boja: zelena; )

Komšija 1

Komšija 2

Komšija 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 postoji čvor nakon referentnog čvora, dodaje se novi čvor
Ako referencirani čvor tada ima potomke, tada se novi čvor umeće ispred tog brata ili sestre

Vraća novi čvor

Ekstenzija čvora

Node.prototype.insertAfter = function(čvor, referentniČvor) ( if (čvor) this.insertBefore(čvor, referentniČvor && referenceNode.nextSibling); povratni čvor; );

Jedan opšti primjer

Node.parentNode.insertAfter(newNode, node);

// Prvo proširi Node.prototype.insertAfter = function(čvor, referentniČvor) ( if (čvor) this.insertBefore(čvor, referentniČvor && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "Prva nova stavka"; newNode.style.color = "#FF0000"; document.getElementById("bez djece").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"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Četvrta nova stavka"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode);

Nema djece

Nema referentnog čvora

Prva stavka

Nema braće i sestara posle

Prva stavka

Brat posle

Prva stavka
Treća stavka

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

Node.prototype.insertAfter = function(newNode, referenceNode) (vrati referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // zasnovano na karim79-ovom rješenju ); // dobivanje potrebnih ručki var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // kreiranje

stav tri

var txt = document.createTextNode("paragraf tri"); var paragraf = document.createElement("p"); paragraf.appendChild(txt); // sada ga možemo nazvati na isti način kao insertBefore() parent.insertAfter(paragraph, refElem);

stav jedan

stav dva

Imajte na umu da proširenje DOM-a možda nije pravo rješenje za vas, kao što je navedeno u ovom članku.

Međutim, ovaj članak je napisan 2010. godine i sada stvari mogu biti drugačije. Zato odlučite sami.

Omogućava vam rukovanje svim scenarijima

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

Ovaj kod radi na umetanju elementa veze odmah nakon posljednjeg postojećeg podređenog umetanja kako bi se umetnuo mali css fajl

Var raf, cb=function())( //kreiraj novi čvor var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //insert iza zadnjeg čvora var nodes=document.getElementsByTagName("link"); //postojeći čvorovi var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode. nextSibling ); //provjera 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ć postoji previše odgovora na ovo pitanje, ali nijedan od njih nije zadovoljio moje tačne zahtjeve.

Trebam funkciju koja ima potpuno suprotno ponašanje od parentNode.insertBefore- to jest, trebao bi prihvatiti null referenceNode (koji nije prihvaćen kao odgovor) i gdje će insertBefore umetnuti u kraj insertBefore u koji treba da ubaci početak, jer inače ne bi bilo načina da se zalijepi na originalnu lokaciju s ovom funkcijom; iz istog razloga insertBefore umeće na kraju.

Budući da nulti referentniNode zahtijeva od vas da insertBefore roditelj, moramo znati roditelj - insertBefore je metoda parentNode , tako da ima pristup roditeljskom parentNode na taj način; naša funkcija ne postoji, tako da moramo proslijediti roditeljski 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 = funkcija (noviČvor, referentniČvor) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); ); )

node1.after(node2) kreira ,

gdje su čvor1 i čvor2 DOM čvorovi.

U ovom postu želim da vam kažem kako da dodate ili uklonite element iz objekta u JavaScript-u. Vrlo je jednostavno, ali mnogi početnici, poput mene prije, često se zbune oko toga.

Kreirajmo primjer objekta

var obj = ( ime: "alex", prezime: "petrov", web stranica: "site", );

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

Dodavanje novog elementa

obj.country = "ru"; // će objektu dodati novi ključ "country" sa vrijednošću "ru" obj["city"] = "Moskva"; // će također dodati novi ključ, samo "grad" sa vrijednošću "Moskva"

Kod iznad je jasan, ali samo da pojasnimo: objektu možete dodati nove vrijednosti u sintaksi objekta koristeći "." i ključ ili uobičajeni format niza. Ako ga deklarirate kao niz, tada je obj i dalje objekt, jer ste ga prethodno tako označili zahvaljujući () .

Kreirajte objekt unutar objekta

obj.other_obj = (); // kreiramo novu vrijednost other_obj u obj i napravimo je objektom

Sada dodajmo neke podatke tamo:

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

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

Uklanjanje elementa

deleteobj.name; // vraća: istina

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

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

To je sve, ako i dalje imate pitanja o objektima u JavaScript-u, napišite komentar ispod, pokušaću da vam pomognem.

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

Dodavanje čvorova stablu

Dodavanje novog čvora stablu obično se izvodi u 2 faze:

Kreirajte potreban čvor koristeći jedan od sljedećih metoda:

createElement() - kreira element (čvor) sa navedenim imenom (tag). Metoda createElement(element) ima jedan obavezni parametar (element) - ovo je niz koji sadrži ime elementa (oznaka) koji se kreira. Morate navesti ime elementa (oznaka) u parametru velikim slovima. Kao rezultat ovu metodu vraća element koji je kreiran.
createTextNode() - kreira tekstualni čvor sa 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 kreiran.

Odredite lokaciju u stablu gdje treba umetnuti čvor. Da biste to učinili, morate koristiti jednu od sljedećih metoda:

appendChild() - dodaje čvor kao posljednje dijete elementa na kojem se poziva ova metoda. Metoda appendChild(čvor) ima jedan obavezni parametar: čvor koji želite da dodate. Kao rezultat, ova metoda vraća dodani čvor.
insertBefore() - umeće čvor kao podređeni čvor elementa na kojem je ova metoda pozvana. Metoda insertBefore(newNode,existingNode) ima dva parametra: newNode (obavezno) je čvor koji želite da dodate, postojeći čvor (opciono) je podređeni čvor elementa ispred kojeg želite da umetnete čvor. Ako drugi parametar (existingNode) nije naveden, onda će ga ovaj metod umetnuti na kraju, tj. kao posljednji podređeni čvor elementa za koji se poziva ova metoda. Metoda insertBefore() vraća umetnuti čvor kao rezultat.

na primjer:

Kompjuter
Laptop
Tablet

Razmotrimo složeniji primjer u kojem stablu dodajemo LI čvor koji sadrži tekstualni čvor sa tekstom "Smartphone" na kraju ul liste.

Da biste to uradili potrebno je da uradite sledeće:

Kreirajte element (čvor) LI.
Kreirajte tekstualni čvor koji sadrži tekst "Smartphone".
Dodajte kreirani tekstualni čvor kao posljednji podređeni čvor novokreiranog LI elementa
Dodajte novokreirani LI čvor kao posljednji podređeni čvor elementa ul

//kreirajte element (čvor) li var elementLI = document.createElement("li"); //kreirajte tekstualni čvor koji sadrži tekst "Smartphone" var textSmart= document.createTextNode("Smartphone"); //dodavanje kreiranog tekstualnog čvora kao posljednjeg podređenog elementa novokreiranom LI elementu elementLI.appendChild(textSmart); //dobijamo element kojem će kreirani li čvor biti dodan kao podređeni var elementUL = document.getElementById("list"); //dodajte kreirani li element kao posljednji podređeni element u UL sa id="list" elementUL.appendChild(elementLI);

AppendChild() i insertBefore() metode kada radite sa postojećim čvorovima

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

Nabavite postojeći čvor u stablu.
Odredite lokaciju na koju treba umetnuti čvor pomoću metode appendChild() ili insertBefore(). Ovo će ukloniti čvor sa njegove prethodne lokacije.

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

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

Vježbajte

U dokumentu postoje dvije liste. Morate premjestiti elemente sa druge liste na prvu.
Kreirajte listu, tekstualno polje i 2 dugmeta. Napišite kod u JavaScript-u koji, u zavisnosti od pritisnutog dugmeta, dodaje tekst u tekstualno polje na početak ili kraj liste.

Uklanjanje čvorova

Uklanjanje čvora sa stabla izvodi se u 2 faze:

Uzmite (pronađite) ovaj čvor u stablu. Ova radnja se obično izvodi pomoću jedne od sljedećih metoda: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() ili querySelectorAll() .
Pozovite metodu removeChild() na roditeljskom čvoru, koja mora biti proslijeđena kao parametar čvoru koji želimo ukloniti iz njega.
Metoda removeChild() vraća uklonjeni čvor kao njegovu vrijednost ili null ako čvor koji želimo ukloniti ne postoji.

//pronađimo čvor koji želimo da izbrišemo var findElement = document.getElementById("notebook"); //pozovite metodu removeChild na roditeljskom čvoru //i proslijedite mu pronađeni čvor kao parametar findElement.parentNode.removeChild(findElement);

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

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

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

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

Vježbajte

Napišite funkciju koja uklanja sve tekstualne čvorove iz elementa.
Postoje 2 liste (), napišite JavaScript kod koji uklanja sve elemente sa liste 1 i 2.

Ako trebate da kreirate HTML element, a ne znate kako da ga implementirate, onda ste došli na pravo mjesto. Ovaj članak neće samo pogledati primjer stvaranja elementa, već će i napisati univerzalnu funkciju s kojom možete kreirati novi element, dodajte mu razne atribute, ispunite ga tekstom.

Ali prvo, počnimo s nečim jednostavnim. Prilikom kreiranja novog elementa koristićemo metode DOM objekta, i to:

* document.createElement(param) - ova metoda se koristi direktno za kreiranje elementa. Kao parametar uzima ime elementa koji se kreira. Vraća vezu do kreiranog elementa.

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

* document.appendChild(param) – ovaj metod se koristi za dodavanje elementa u HTML kod. Uzima vezu do kreiranog elementa kao parametar;

var parent = document.getElementsByTagName("BODY"); //dobijemo vezu do elementa tijela

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

parent.appendChild(elem // dodaje element, pri čemu je parent veza na koju će biti dodan naš element, u ovom slučaju to je tijelo tijela);

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

Primjer kreiranja 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 se novi element postaviti. Zatim se kreira novi element P, dodaju mu se atributi id, klasa, stil i postavljaju vrijednosti ovih atributa. Zatim se kreira tekstualni čvor i dodaje našem novom elementu. Nakon svega ovoga, sam element se dodaje tijelu tijela. Da biste napravili veliki broj novih elemenata moraćete da se potrudite, jer... možda ćete morati da ih postavite 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 kreirate novi element, dodate mu različite atribute, priložite mu tekstualni čvor, postavite ga ispred ili iza navedenog elementa ili zamijenite element novokreiranim elementom. Potreban je samo argument name.

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

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

Var e = document.createElement(name);

Ako (attrs) (

Za (ključ u attre) (

Ako (ključ == "klasa") (

E.className = attrs;

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

E.id = attrs;

) drugo (

E.setAttribute(ključ, attrs);

Ako (stil) (