Zdravo! Pomoću JavaScripta ne samo da možete pronaći elemente na stranici (pročitajte kako to učiniti), već i dinamički stvarati elemente i dodavati ih u DOM. Kako to učiniti, raspravljat ćemo u ovoj lekciji.

Kako bismo stvorili novi element na web stranici - objekt dokumenta ima sljedeće metode:

• createElement(elementName) : stvara novi element, svaka oznaka HTML stranice mora biti proslijeđena kao parametar, vraća HTML element
• createTextNode(text) : Stvara 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 na novi div element. Međutim, kao što razumijete, stvaranje elemenata nije dovoljno; još ih je potrebno dodati na web stranicu. Uostalom, kada na ovaj način kreiramo elemente, oni kao da su u nekom virtualnom prostoru ili u memoriji, ali da bi se 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 ispred čvora navedenog kao drugi parametar.

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

Naslov članka

Prvi paragraf

Drugi paragraf

var article = document.querySelector("div.article"); // kreiraj element var el = document.createElement("h3"); // kreiraj tekst za njega var elTxt = document.createTextNode("Hello world"); // dodaj tekst elementu kao podređeni element el.appendChild(elTxt); // dodaj element u div blok article.appendChild(el);

Primjer je stvorio 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 stvaranje teksta unutar elementa; za to postoji svojstvo textContent, koje vam omogućuje izravno dodjeljivanje teksta elementu.

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

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

Također pogledajmo kako dodati ovaj element na početak zbirke podređenih čvorova diva:

Var artDiv = document.querySelector("div.article"); // kreiraj element var el = document.createElement("h2"); // kreiraj tekst za njega var eltxt = document.createTextNode("Hello world"); // dodaj tekst elementu kao podređeni element el.appendChild(eltxt); // dobivanje prvog elementa kojemu će prethoditi dodatak var firstEl = artDiv.firstChild.nextSibling; // dodaj 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 trebate pronaći čvor ispred kojeg ga trebate umetnuti pomoću sljedećih svojstava firstChild/lastChild ili nextSibling/previousSibling.

Kopiranje elementa

Postoje situacije kada su elementi prilično složeni u sastavu 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); // dodavanje na kraj elementa tijela document.body.appendChild(newArtDiv);

Morate proslijediti Booleovu vrijednost kao parametar metodi cloneNode(): ako proslijedite true, element će se kopirati zajedno sa svim podređenim čvorovima; ako proslijedite false, bit će kopiran bez podređenih čvorova. U u ovom primjeru kopiramo element zajedno s njegovim sadržajem i dodamo ga na kraj web stranice.

Uklanjanje elementa

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

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

Ovaj će primjer ukloniti prvi odlomak iz bloka div

Zamjena elementa

Za zamjenu jednog elementa 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"); // pronađite čvor koji ćemo zamijeniti - prvi paragraf var old = document.querySelectorAll("div.article p"); // kreiraj element var new = document.createElement("h3"); // kreiraj tekst za njega var elemtxt = document.createTextNode("Hello world"); // dodaj tekst elementu kao podređeni element new.appendChild(elemtxt); // zamijeni stari čvor novim artDiv.replaceChild(novo, staro);

U ovom primjeru zamjenjujemo prvi odlomak s h2 naslovom koji smo upravo stvorili.

REZULTATI.

Za izradu elementa koriste se sljedeće metode:

document.createElement(tag) - stvara novi element.

document.createTextNode(text) - stvara tekstualni čvor

Metode umetanja i uklanjanja čvorova

• parent.appendChild(el) - dodaje element na kraj postojećeg elementa
• parent.insertBefore(el, nextSibling) - umeće element prije 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 lažan onda bez podređenih elemenata

Zadaci Funkcija umetanja elemenata

Napišite funkciju insertAfter(newEl,oldEl) koja umeće jedan element za drugim 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 ribica."));
var div = document.createElement("div");
div.setAttribute("id", "novo");
div.appendChild(p);

onda bi vam ovo moglo biti od koristi.

Problem: Kada stvorite više od jednog elementa ugniježđenog jedan u drugi, kôd postaje vrlo složen.

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

Ili div s odlomkom i vezom unutar njega:
var div = create("div", ( id: "new", style: "background:#fff"),
create("p", ( align: "center"),
"Uvod: ",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg"),
"slika"),
": kraj")
);

Ili ovdje napravimo tablicu:
var holder = document.getElementById("holder2");
var tablica;
var td;
holder.appendChild(
stol =
create("tablica", (id: "ružna", cols:3),
create("tbody", (),
stvoriti("tr", (),
create("td", ( width: "10%"),
"zdravo"),
td =
create("td", ( stil: "pozadina: #fcc"),
"tamo")
create("td", ( Klasa: "special2"), "svugdje")
)
);

Napomena: 1. IE zahtijeva element tbody, inače odbija prikazati tablicu.
2. Atribut klase je u sukobu s nečim, pa ga morate napisati kao Klasa. Čini se da to nema nikakvog utjecaja na rezultat.
3. table = i tr = u primjeru omogućuju spremanje stvorenih ugniježđenih objekata za daljnji rad s njima.
4. Ovaj kod radi u IE, Mozilli i Operi. Sama funkcija funkcija create(ime, atributi) (
var el = document.createElement(name);
if (atributi typeof == "objekt") (
za (var i u atributima) (
el.setAttribute(i, atributi[i]);

If (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);
}
povratak el;
}

Za ideju treba zahvaliti Ivanu Kurmanovu,
Izvorni članak s 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 nakon drugi element bez korištenja jQueryja ili druge biblioteke?

Izravni JavaScript bi bio:

Dodati:

Element.parentNode.insertBefore(noviElement, element);

Dodaj nakon:

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

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

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;

Da biste ga vidjeli na djelu, pokrenite sljedeći isječak koda

/* 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

Poslije nema braće i sestara

• Prva stavka

Brat i sestra poslije

• 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

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);

paragraf jedan

paragraf 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 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 proslijediti 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 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.

Kreirajmo objekt na primjer var obj = ( name: "alex", last_name: "petrov", website: "site", );

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.

Dodavanje novog elementa obj.country = "ru"; // dodati će novi ključ"country" u objekt s vrijednošću "ru" obj["city"] = "Moskva"; // također će dodati novi ključ, samo "grad" s vrijednošću "Moskva"

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 () .

Stvorite objekt unutar objekta obj.other_obj = (); // kreirajte novu vrijednost other_obj u obj i učinite je objektom

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.

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

Ovo je četvrti dio postova posvećen nativnim ekvivalentima jQuery metoda. Možda ćete ovo htjeti pročitati prije nastavka.

U ovom ćemo članku pogledati načine stvaranja, umetanja, premještanja i brisanja elemenata. I premda jQuery već sadrži velik broj korisnih metoda, iznenadit ćete se kada saznate da se sve to može lako učiniti koristeći izvorne metode.

Manipuliranje HTML kodom jQuery elemenata // get var html = $(elem).html(); // postavi $(elem).html("Novi html"); Izvorni JS // get var html = elem.innerHTML; // postavi elem.innerHTML = "Novi html"; jQuery element manipulacija tekstom // get var text = $(elem).text(); // postavi $(elem).text("Novi tekst"); Izvorni JS // get var text = elem.textContent; // postavi elem.textContent = "Novi tekst"; Stvaranje jQuery elementa $(""); Izvorni JS dokument.createElement("div"); Dodaje sadržaj na kraj jQuery elemenata $(parentNode).append(newNode); Izvorni JS parentNode.appendChild(newNode); Dodaje sadržaj na početak jQuery elemenata $(referenceNode).prepend(newNode); Izvorni JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // ili referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Umetni izravno ispred elementa jQuery $(referenceNode).before(newNode); Izvorni JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // ili referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Umetni izravno nakon elementa jQuery $(referenceNode).after(newNode); Izvorni 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 referentni čvor u DOM stablu i ima nadređeni element.

Pogledajte sljedeće:

ReferenceNode.insertAdjacentElement(position, node);

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

Sadržaj teksta

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

Metoda insertAdjacentElement čišća je i intuitivnija od metode insertBefore, ali potonja je bolje podržana u starijim preglednicima.

Dodavanje elemenata više puta

Također je vrijedno napomenuti da će dodavanje elementa u čvor koji se nalazi u DOM stablu dovesti do ponovnog crtanja. To nije baš dobro jer preglednik mora ponovno izračunati veličinu i položaj novog elementa, što će također dovesti do promjena u potomcima elementa, precima i elementima koji se pojavljuju nakon njega u DOM-u. Ako DOM-u dodajete mnogo elemenata, to može potrajati.

Da biste to izbjegli, možete ga dodati s DocumentFragmentom. Fragment dokumenta je objekt dokumenta koji postoji samo u memoriji, tako da njegovo dodavanje neće uzrokovati preoblikovanje.

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

// Dobivanje elementa 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, elementi li dodaju se izravno elementu ul, koji se nalazi u DOM stablu, stoga će rezultirati ponovnim crtanjem pri svakoj iteraciji - to je 100 promjena!

Pronađimo bolji način.

// Dobivanje elementa koji će sadržavati naše stavke var ul = document.querySelector("ul"); // kreirajte fragment dokumenta za dodavanje elemenata popisa 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, elementi li dodani su 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(); Izvorni JS referenceNode.parentNode.removeChild(referenceNode); // ili referenceNode.remove(); // FF 23.0+, 23.0+, Edge (Nema podrške za IE)