Js dinamičko stvaranje elemenata. JavaScript: Kako dodati novi element objektu? Primjer: prikaži poruku

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

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 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 veliki broj korisnih metoda, iznenadit ćete se kada saznate da se sve to može jednostavno učiniti koristeći izvorne metode.

Manipulacije s HTML kodom elemenata

jQuery
// dobij var html = $(elem).html(); // postavi $(elem).html("
Novi html
");
Izvorni JS
// dobiti var html = elem.innerHTML; // postavi elem.innerHTML = "
Novi html
";

Manipulacija tekstom elementa

jQuery
// dobij var text = $(elem).text(); // postavi $(elem).text("Novi tekst");
Izvorni JS
// dobiti var text = elem.textContent; // postavi elem.textContent = "Novi tekst";

Stvaranje elementa

jQuery
$("
");
Izvorni JS
document.createElement("div");

Dodaje sadržaj na kraj elemenata

jQuery
$(parentNode).dodaj(noviNode);
Izvorni JS
parentNode.appendChild(newNode);

Dodaje sadržaj na početak elemenata

jQuery
$(referentniČvor).prepend(noviČvor);
Izvorni JS
referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // ili referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+

Umetanje izravno ispred elementa

jQuery
$(referentniČvor).prije(noviČvor);
Izvorni JS
referentniČvor.roditeljskiČvor.insertBefore(noviČvor, referentniČvor); // ili referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+

Umetanje neposredno nakon elementa

jQuery
$(referentničvor).nakon(novičvor);
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 elementa

jQuery
$(referentni čvor).ukloni();
Izvorni JS
referentniČvor.roditeljskiČvor.ukloniDijete(referentniČvor); // ili referenceNode.remove(); // FF 23.0+, 23.0+, Edge (Nema podrške za IE)

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 čvorova u stablo

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

  1. Stvorite potrebni čvor pomoću jedne od sljedećih metoda:
  • 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. U parametru morate navesti naziv elementa (tag). 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.
  • Odredite mjesto 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 ova metoda poziva. Metoda appendChild(node) ima jedan potreban parametar: čvor koji želite dodati. Kao rezultat, ova metoda vraća dodani čvor.
    • insertBefore() - umeće čvor kao podređeni čvor elementa na kojem se ova metoda poziva. Metoda insertBefore(newNode,existingNode) ima dva parametra: newNode (obavezno) je čvor koji želite dodati, existingNode (neobavezno) je podređeni čvor elementa ispred kojeg želite umetnuti čvor. Ako drugi parametar (existingNode) nije naveden, tada će ga ova metoda umetnuti na kraj, tj. kao zadnji podređeni čvor elementa za koji se poziva ova metoda. Metoda insertBefore() vraća umetnuti čvor kao rezultat.

    Na primjer:

    • Računalo
    • Prijenosno računalo
    • Tableta

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

    Da biste to učinili, trebate učiniti sljedeće:

    1. Napravite element (čvor) LI.
    2. Napravite tekstualni čvor koji sadrži tekst "Smartphone".
    3. Dodajte kreirani tekstualni čvor kao zadnji podređeni čvor novostvorenog LI elementa
    4. Dodajte novostvoreni LI čvor kao zadnji podređeni čvor elementa ul
    //kreiraj element (čvor) li var elementLI = document.createElement("li"); //stvori tekstualni čvor koji sadrži tekst "Smartphone" var textSmart= document.createTextNode("Smartphone"); //dodavanje kreiranog tekstualnog čvora kao posljednjeg podređenog elementa novostvorenom LI elementu elementLI.appendChild(textSmart); //dobijte element kojem će kreirani li čvor biti dodan kao dijete var elementUL = document.getElementById("list"); //dodajte kreirani element li kao zadnji podređeni element u UL s id="list" elementUL.appendChild(elementLI);

    Metode AppendChild() i insertBefore() pri radu s postojećim čvorovima

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

    1. Dobijte postojeći čvor u stablu.
    2. Odredite mjesto gdje se čvor treba umetnuti pomoću metode appendChild() ili insertBefore(). Ovo će ukloniti čvor s njegove prethodne lokacije.

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

    Vježbajte

    • 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 čvorova

    Uklanjanje čvora iz stabla provodi se u 2 faze:

    1. Uzmite (pronađite) ovaj čvor u stablu. Ova se radnja obično izvodi pomoću jedne od sljedećih metoda: getElementById(), getElementsByClassName(), getElementsByTagName(), getElementsByName(), querySelector() ili querySelectorAll().
    2. 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 smo htjeli ukloniti nije postojao.

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

    Vježbajte

    1. Napišite funkciju koja uklanja sve tekstualne čvorove iz elementa.
    2. Postoje 2 popisa (), napišite JavaScript kôd koji uklanja sve elemente s popisa 1 i 2.