Zdravo! Koristeći JavaScript, ne samo da možete pronaći elemente na stranici (pročitajte kako to učiniti), već i dinamički kreirati elemente i dodati ih u DOM. Kako to učiniti bit će riječi u ovoj lekciji.

U cilju stvaranja novi element na web stranici - objekt dokumenta ima sljedeće metode:

• createElement(elementName) : kreira novi element, svaka HTML oznaka stranice mora biti proslijeđena kao parametar, vraća HTML element
• createTextNode(text) : Kreira tekstualni čvor i vraća isti.

Dodavanje elementa

Pogledajmo mali primjer:

Var el = document.createElement("div"); var elText = document.createTextNode("Zdravo svijete");

Kao što možete vidjeti iz primjera, varijabla elem će pohraniti vezu do novog elementa div. Međutim, kao što razumijete, kreiranje elemenata nije dovoljno, oni još uvijek moraju biti dodati na web stranicu. Uostalom, kada kreiramo elemente na ovaj način, oni izgledaju kao da su u nekoj vrsti virtualnog prostora ili u memoriji, ali da bi ih prikazali na web stranici, postoje posebne metode.

Za dodavanje elemenata na web stranicu koriste se sljedeće metode:

• appendChild(newNode) : dodaje novi element na kraj elementa na kojem je ova metoda pozvana
• insertBefore(newNode, referenceNode) : dodaje novi čvor prije čvora specificiranog kao drugi parametar.

Pogledajmo primjer pričvršćivanja elementa na web stranicu pomoću metode appendChild:

Naslov članka

Prvi paragraf

Drugi paragraf

var članak = document.querySelector("div.article"); // kreiranje elementa var el = document.createElement("h3"); // kreiraj tekst za to var elTxt = document.createTextNode("Hello world"); // dodaj tekst elementu kao podređeni element el.appendChild(elTxt); // dodajemo element div bloku article.appendChild(el);

Primjer je kreirao normalan h3 element zaglavlja i tekstualni čvor. Tekstni čvor se zatim dodaje elementu naslova. Naslov se zatim dodaje jednom od elemenata web stranice tako da se može vidjeti na stranici.

Ali uopće nije potrebno imati dodatni tekstualni čvor za kreiranje teksta unutar elementa; za to postoji svojstvo textContent, koje vam omogućava da direktno dodijelite tekst elementu.

Var el = document.createElement("h3"); el.textContent = "Zdravo, ja sam naslov";

U ovom slučaju, tekst će biti kreiran implicitno prilikom direktnog postavljanja teksta.

Pogledajmo i kako dodati ovaj element na početak kolekcije podređenih čvorova diva:

Var artDiv = document.querySelector("div.article"); // kreiranje elementa var el = document.createElement("h2"); // kreiraj tekst za to var eltxt = document.createTextNode("Hello world"); // dodajemo tekst elementu kao podređeni element el.appendChild(eltxt); // dobijemo prvi element kojem će prethoditi dodatak var firstEl = artDiv.firstChild.nextSibling; // dodajemo element u div blok prije prvog čvora artDiv.insertBefore(el, firstEl);

Ako iznenada trebate dodati novi čvor na drugo, treće ili bilo koje drugo mjesto, tada morate pronaći čvor prije kojeg ga trebate umetnuti koristeći sljedeća svojstva firstChild/lastChild ili nextSibling/previousSibling.

Kopiranje elementa

Postoje situacije kada su elementi prilično složene kompozicije i lakše ih je kopirati. Za to se koristi posebna metoda cloneNode().

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

Morate prenijeti Booleovu vrijednost kao parametar metodi cloneNode(): ako prođete true, element će biti kopiran zajedno sa svim podređenim čvorovima; ako prođete false, biće kopirano bez podređenih čvorova. IN u ovom primjeru kopiramo element zajedno sa njegovim sadržajem i dodajemo ga na kraj web stranice.

Uklanjanje elementa

Da biste uklonili element, morate pozvati metodu removeChild(). Ova metoda će ukloniti jedan od podređenih čvorova:

Var artDiv = document.querySelector("div.article"); // pronalazimo čvor koji ćemo izbrisati - prvi pasus var removNode = document.querySelectorAll("div.article p"); // uklonimo čvor artDiv.removeChild(removNode);

Ovaj primjer će ukloniti prvi pasus iz div bloka

Zamjena elementa

Da zamijenite jedan element drugim, koristite metodu replaceChild(newNode, oldNode). Ova metoda uzima novi element kao 1. parametar, koji zamjenjuje stari element proslijeđen kao 2. parametar.

Var artDiv = document.querySelector("div.article"); // pronalazimo čvor koji ćemo zamijeniti - prvi paragraf var old = document.querySelectorAll("div.article p"); // kreiranje elementa var new = document.createElement("h3"); // kreiraj tekst za to var elemtxt = document.createTextNode("Hello world"); // dodaj tekst elementu kao podređeni element new.appendChild(elemtxt); // zamijenimo stari čvor novim artDiv.replaceChild(new, old);

U ovom primjeru zamjenjujemo prvi pasus naslovom h2 koji smo upravo kreirali.

REZULTATI.

Za kreiranje elementa koriste se sljedeće metode:

document.createElement(tag) - kreira novi element.

document.createTextNode(text) - kreira tekstualni čvor

Metode za umetanje i uklanjanje čvorova

• parent.appendChild(el) - dodaje element na kraj postojećeg elementa
• parent.insertBefore(el, nextSibling) - umeće element ispred postojećeg elementa
• parent.removeChild(el) - uklanja element
• parent.replaceChild(newElem, el) - zamjenjuje jedan element drugim
• parent.cloneNode(bool) - kopira element, ako je parametar bool=true onda se element kopira sa svim podređenim elementima, a ako je false onda bez podređenih elemenata

Zadaci Funkcija umetanja elemenata

Napišite funkciju insertAfter(newEl,oldEl) koja umeće jedan za drugim element u samu funkciju, a sami elementi se prosljeđuju kao parametri.

Ako ste ikada pisali JavaScript i morali ste napisati nešto poput:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Prava riba."));
var div = document.createElement("div");
div.setAttribute("id", "new");
div.appendChild(p);

onda bi vam ovo moglo biti od koristi.

Problem: Kada kreirate više od jednog elementa ugniježđenih jedan unutar drugog, kod postaje vrlo složen.

Nudim jednostavan alat za rješavanje problema - funkciju create() (izvorni kod ispod). Na primjer, napravimo pasus teksta:
var el = create("p", ( ), "Zbogom, ljubavi!");

Ili div sa paragrafom i vezom unutar njega:
var div = create("div", ( id: "new", style: "background:#fff" ),
kreiraj("p", ( poravnaj: "centar"),
"uvod: ",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"slika"),
": kraj")
);

Ili ovdje pravimo tabelu:
var holder = document.getElementById("holder2");
var table;
var td;
holder.appendChild(
tablica =
create("tablica", (id: "ružna", cols:3),
create("tbody", (),
kreiraj("tr", (),
create("td", ( širina: "10%" ),
"zdravo")
td =
create("td", ( style: "background: #fcc" ),
"tamo")
create("td", ( Klasa: "special2"), "svugdje")
)
);

Napomena: 1. IE zahtijeva element tbody, inače odbija da prikaže tabelu.
2. Atribut klase je u sukobu s nečim, tako da ga morate napisati kao Class. Čini se da to nema nikakvog utjecaja na rezultat.
3. table = i tr = u primjeru vam omogućavaju da sačuvate kreirane ugniježđene objekte za daljnji rad s njima.
4. Ovaj kod radi u IE, Mozilla i Opera. Funkcija sama funkcija create(name, attributes) (
var el = document.createElement(name);
if (typeof attributes == "objekt") (
za (var i u atributima) (
el.setAttribute(i, atributi[i]);

Ako (i.toLowerCase() == "klasa") (
el.className = atributi[i]; // za IE kompatibilnost

) else if (i.toLowerCase() == "style") (
el.style.cssText = atributi[i]; // za IE kompatibilnost
}
}
}
za (var i = 2; i< arguments.length; i++) {
var val = argumenti[i];
if (typeof val == "string") (val = document.createTextNode(val));
el.appendChild(val);
}
return el;
}

Treba se zahvaliti Ivanu Kurmanovu na ideji,
Originalni članak sa radnim primjerima:

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; ) Susjed 1 Susjed 2 Susjed 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 uobičajen primjer

Node.parentNode.insertAfter(newNode, node);

Pogledajte pokretanje koda

// Prvo proširiti 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); inače 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.

Treba mi funkcija koja ima potpuno suprotno ponašanje od parentNode.insertBefore - to jest, trebala 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 objekat na primjer 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 dodati novi ključ"country" u objekat 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, onda je obj i dalje objekt, jer ste ga prethodno tako označili zahvaljujući () .

Kreirajte objekat 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.

Brisanje elementa delete obj.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.

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 korisnih metoda, iznenadit ćete se kada saznate da se sve ovo može lako uraditi korištenjem prirodnih metoda.

Manipuliranje HTML kodom jQuery elemenata // get var html = $(elem).html(); // set $(elem).html("Novi html"); Native JS // get var html = elem.innerHTML; // set elem.innerHTML = "Novi html"; jQuery element manipulacija tekstom // get var text = $(elem).text(); // set $(elem).text("Novi tekst"); Native JS // get var text = elem.textContent; // set elem.textContent = "Novi tekst"; Kreiranje jQuery elementa $(""); Izvorni JS document.createElement("div"); Dodaje sadržaj na kraj jQuery elemenata $(parentNode).append(newNode); Native JS parentNode.appendChild(newNode); Dodaje sadržaj na početak jQuery elemenata $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // ili referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Umetanje 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

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

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 jQuery elementa $(referenceNode).remove(); Native JS referenceNode.parentNode.removeChild(referenceNode); // ili referenceNode.remove(); // FF 23.0+, 23.0+, Edge (bez podrške za IE)