Zdravo! Z uporabo JavaScripta ne morete samo poiskati elementov na strani (preberite, kako to storiti), temveč tudi dinamično ustvariti elemente in jih dodati v DOM. Kako to storiti, bomo razpravljali v tej lekciji.

Da bi ustvarili nov element na spletni strani - predmet dokumenta ima naslednje metode:

• createElement(elementName) : ustvari nov element, katera koli oznaka strani HTML mora biti posredovana kot parameter, vrne element HTML
• createTextNode(text) : Ustvari besedilno vozlišče in vrne isto.

Dodajanje elementa

Poglejmo majhen primer:

Var el = document.createElement("div"); var elText = document.createTextNode("Pozdravljen svet");

Kot lahko vidite iz primera, bo spremenljivka elem shranila povezavo do novega elementa div. Vendar, kot razumete, ustvarjanje elementov ni dovolj, še vedno jih je treba dodati na spletno stran. Konec koncev, ko ustvarjamo elemente na ta način, se zdi, da so v nekem navideznem prostoru ali v pomnilniku, a da jih prikažemo na spletni strani, obstajajo posebne metode.

Za dodajanje elementov na spletno stran se uporabljajo naslednje metode:

• appendChild(newNode) : doda nov element na konec elementa, na katerem je bila ta metoda poklicana
• insertBefore(newNode, referenceNode) : doda novo vozlišče pred vozlišče, navedeno kot drugi parameter.

Oglejmo si primer pripenjanja elementa na spletno stran z uporabo metode appendChild:

Naslov članka

Prvi odstavek

Drugi odstavek

var article = document.querySelector("div.article"); // ustvari element var el = document.createElement("h3"); // ustvari besedilo zanj var elTxt = document.createTextNode("Hello world"); // dodaj besedilo elementu kot podrejeni element el.appendChild(elTxt); // dodajte element v blok div article.appendChild(el);

Primer je ustvaril običajni element glave h3 in besedilno vozlišče. Besedilno vozlišče se nato doda elementu naslova. Naslov se nato doda enemu od elementov spletne strani, tako da ga je mogoče videti na strani.

Vendar sploh ni potrebno imeti dodatnega besedilnega vozlišča za ustvarjanje besedila znotraj elementa; za to obstaja lastnost textContent, ki vam omogoča neposredno dodelitev besedila elementu.

Var el = document.createElement("h3"); el.textContent = "Živijo, jaz sem naslov";

V tem primeru bo besedilo ustvarjeno implicitno pri neposredni nastavitvi besedila.

In poglejmo tudi, kako ta element dodati na začetek zbirke podrejenih vozlišč diva:

Var artDiv = document.querySelector("div.article"); // ustvari element var el = document.createElement("h2"); // ustvari besedilo zanj var eltxt = document.createTextNode("Hello world"); // dodaj besedilo elementu kot podrejeni element el.appendChild(eltxt); // pridobi prvi element, pred katerim bo dodatek var firstEl = artDiv.firstChild.nextSibling; // dodajte element v blok div pred prvim vozliščem artDiv.insertBefore(el, firstEl);

Če morate nenadoma dodati novo vozlišče na drugo, tretje ali katero koli drugo mesto, morate poiskati vozlišče, pred katerim ga morate vstaviti, z uporabo naslednjih lastnosti firstChild/lastChild ali nextSibling/previousSibling.

Kopiranje elementa

Obstajajo situacije, ko so elementi po sestavi precej zapleteni in jih je lažje kopirati. Za to se uporablja ločena metoda cloneNode().

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

Metodi cloneNode() morate posredovati logično vrednost kot parameter: če podate true, bo element kopiran skupaj z vsemi podrejenimi vozlišči; če posredujete false, bo kopiran brez podrejenih vozlišč. IN v tem primeru element kopiramo skupaj z njegovo vsebino in dodamo na konec spletne strani.

Odstranjevanje elementa

Če želite odstraniti element, morate poklicati metodo removeChild(). Ta metoda bo odstranila eno od podrejenih vozlišč:

Var artDiv = document.querySelector("div.article"); // poiščemo vozlišče, ki ga bomo izbrisali - prvi odstavek var removNode = document.querySelectorAll("div.article p"); // odstranite vozlišče artDiv.removeChild(removNode);

Ta primer bo odstranil prvi odstavek iz bloka div

Zamenjava elementa

Za zamenjavo enega elementa z drugim uporabite metodo replaceChild(newNode, oldNode). Ta metoda vzame nov element kot 1. parameter, ki nadomesti stari element, posredovan kot 2. parameter.

Var artDiv = document.querySelector("div.article"); // poiščemo vozlišče, ki ga bomo zamenjali - prvi odstavek var old = document.querySelectorAll("div.article p"); // ustvari element var new = document.createElement("h3"); // ustvari besedilo zanj var elemtxt = document.createTextNode("Hello world"); // dodajanje besedila elementu kot podrejenemu elementu new.appendChild(elemtxt); // zamenjaj staro vozlišče z novim artDiv.replaceChild(novo, staro);

V tem primeru zamenjamo prvi odstavek z naslovom h2, ki smo ga pravkar ustvarili.

REZULTATI.

Za ustvarjanje elementa se uporabljajo naslednje metode:

document.createElement(tag) - ustvari nov element.

document.createTextNode(text) - ustvari besedilno vozlišče

Metode vstavljanja in odstranjevanja vozlišč

• parent.appendChild(el) - doda element na konec obstoječega elementa
• parent.insertBefore(el, nextSibling) - vstavi element pred obstoječi element
• parent.removeChild(el) - odstrani element
• parent.replaceChild(newElem, el) - zamenja en element z drugim
• parent.cloneNode(bool) - kopira element, če je parameter bool=true, se element kopira z vsemi podrejenimi elementi, če je false, pa brez podrejenih elementov

Naloge Funkcija vstavljanja elementov

Napišite funkcijo insertAfter(newEl,oldEl), ki v samo funkcijo vstavi en element za drugim, sami elementi pa se posredujejo kot parametri.

Če ste kdaj pisali JavaScript in ste morali napisati nekaj takega:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Prava ribica."));
var div = document.createElement("div");
div.setAttribute("id", "novo");
div.appendChild(p);

potem vam bo to lahko koristilo.

Težava: Ko ustvarite več elementov, ugnezdenih drug v drugega, koda postane zelo zapletena.

Ponujam preprosto orodje za rešitev problema - funkcijo create() (izvorna koda spodaj). Na primer, ustvarimo odstavek besedila:
var el = create("p", ( ), "Zbogom, ljubezen!");

Ali div z odstavkom in povezavo v njem:
var div = create("div", ( id: "new", style: "background:#fff"),
create("p", ( align: "center"),
"uvod: ",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg"),
"slika"),
": konec")
);

Ali pa tukaj naredimo tabelo:
var holder = document.getElementById("holder2");
var tabela;
var td;
holder.appendChild(
miza =
create("table", (id: "grdo", cols:3),
create("tbody", (),
ustvari ("tr", (),
create("td", ( širina: "10%"),
"zdravo"),
td =
create("td", ( slog: "ozadje: #fcc"),
"tam")
create("td", ( Razred: "special2"), "povsod")
)
);

Prosimo, upoštevajte: 1. IE zahteva element tbody, sicer noče prikazati tabele.
2. Atribut razreda je v konfliktu z nečim, zato ga morate napisati kot Razred. Zdi se, da to ne vpliva na rezultat.
3. table = in tr = v primeru omogočata shranjevanje ustvarjenih ugnezdenih objektov za nadaljnje delo z njimi.
4. Ta koda deluje v IE, Mozilli in Operi Sama funkcija funkcija create(name, attributes) (
var el = document.createElement(name);
if (atributi typeof == "objekt") (
za (var i v atributih) (
el.setAttribute(i, atributi[i]);

If (i.toLowerCase() == "razred") (
el.className = atributi[i]; // za združljivost z IE

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

Za idejo se moramo zahvaliti Ivanu Kurmanovu,
Izvirni članek z delovnimi primeri:

odstrani element js (12)

Korak 1. Pripravite elemente:

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

2. korak. Dodajte po:

elementParent.insertBefore(newElement, element.nextSibling);

JavaScript ima insertBefore(), toda kako lahko vstavim element po drug element brez uporabe jQuery ali druge knjižnice?

Preprost JavaScript bi bil:

Dodaj:

Element.parentNode.insertBefore(novElement, element);

Dodaj za:

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

Vendar dodajte nekaj prototipov za lažjo uporabo

Z ustvarjanjem naslednjih prototipov boste lahko poklicali to funkcijo neposredno iz novo ustvarjenih elementov.

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

Če ga želite videti v akciji, zaženite naslednji delček kode

/* Doda element BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Doda element ZA NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Tipično ustvarjanje in nastavitev novega osirotelega predmeta elementa */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Nov element"; NewElement.id = "NovElement"; /* Dodaj NewElement PRED -ALI- PO uporabi zgoraj omenjenih prototipov */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( text-align: center; ) #Neighborhood ( color: brown; ) #NewElement ( color: green; ) Neighbor 1 Neighbor 2 Neighbor 3

V idealnem primeru bi moral insertAfter delovati podobno kot MDN. Spodnja koda bo naredila naslednje:

• Če ni otrok, se doda novo vozlišče
• Če referenčnega vozlišča ni, se doda novo vozlišče
• Če je za referenčnim vozliščem vozlišče, se doda novo vozlišče
• Če ima navedeno vozlišče potomce, je novo vozlišče vstavljeno pred sorodnega
• Vrne novo vozlišče

Razširitev vozlišča

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

En splošen primer

Node.parentNode.insertAfter(novovozlišče, vozlišče);

Oglejte si izvajanje kode

// Najprej razš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 = "Prvi nov element"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Drugi nov element"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("brez brata-po"); newNode = document.createElement("li"); newNode.innerText = "Tretji nov element"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Četrti nov element"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); Ni otrok. Ni referenčnega vozlišča

• Prvi predmet

Brez bratov in sester pozneje

• Prvi predmet

Sorojenec po

• Prvi predmet
• Tretji predmet

Metoda insertBefore() se uporablja kot parentNode.insertBefore(). Za posnemanje tega in izdelavo metode parentNode.insertAfter() lahko napišemo naslednjo kodo.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // temelji na rešitvi karima79); // pridobivanje zahtevanih ročic var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // ustvarjanje

tretji odstavek

var txt = document.createTextNode("tretji odstavek"); var odstavek = document.createElement("p"); odstavek.appendChild(txt); // zdaj ga lahko pokličemo na enak način kot insertBefore() parent.insertAfter(paragraph, refElem);

prvi odstavek

drugi odstavek

Upoštevajte, da razširitev DOM morda ni prava rešitev za vas, kot je navedeno v tem članku.

Vendar je bil ta članek napisan leta 2010 in stvari so morda zdaj drugačne. Odločite se torej sami.

Omogoča obvladovanje vseh scenarijev

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

Ta koda deluje tako, da vstavi element povezave takoj za zadnjim obstoječim podrejenim vstavljanjem za vstavljanje majhne datoteke css

Var raf, cb=function())( //ustvari novo vozlišče var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //vstavi za zadnjim vozliščem var nodes=document.getElementsByTagName("link"); //obstoječa vozlišča var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode. naslednji brat ); ); //preveri pred vstavljanjem poskusi ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Vem, da je odgovorov na to vprašanje že preveč, a nobeden od njih ni ustrezal mojim natančnim zahtevam.

Potrebujem funkcijo, ki ima ravno nasprotno vedenje kot parentNode.insertBefore – to pomeni, da bi morala sprejeti ničelno referenčno vozlišče (ki ni sprejeto kot odgovor) in kamor bo insertBefore vstavil v konec insertPred katerim naj vstavi začetek, ker drugače ne bi bilo možnosti za lepljenje na izvirno lokacijo s to funkcijo; iz istega razloga insertBefore vstavi na koncu.

Ker ničelno referenčno vozlišče zahteva, da nadrejenega vozlišča insertBefore, moramo poznati nadrejenega - insertBefore je metoda parentNode, zato ima na ta način dostop do nadrejenega nadrejenega vozlišča; naša funkcija ne obstaja, zato moramo posredovati nadrejeni element kot parameter.

Nastala funkcija izgleda takole:

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) ustvari,

kjer sta vozlišče1 in vozlišče2 vozlišči DOM.

V tej objavi vam želim povedati, kako dodati ali odstraniti element iz predmeta v JavaScriptu. Je zelo preprosto, vendar se mnogi začetniki, tako kot jaz prej, zaradi tega pogosto zmedejo.

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

Imamo preprost objekt, ki vsebuje podatke, kot so ime, priimek in spletno mesto. Podatki so lahko popolnoma kakršni koli, a za namene te objave bo točno to.

Dodajanje novega elementa obj.country = "ru"; // bo dodal nov ključ"država" v objekt z vrednostjo "ru" obj["mesto"] = "Moskva"; // dodal bo tudi nov ključ, samo "mesto" z vrednostjo "Moskva"

Zgornja koda je jasna, a samo za pojasnilo: nove vrednosti lahko dodate objektu v sintaksi objekta z uporabo "." in ključ ali običajni format polja. Če ga deklarirate kot matriko, potem je obj še vedno objekt, saj ste ga prej tako označili zahvaljujoč ().

Ustvarite predmet znotraj predmeta obj.other_obj = (); // ustvarite novo vrednost other_obj v obj in jo spremenite v objekt

Zdaj pa dodamo nekaj podatkov:

Obj.other_obj.first = "prvi ključ novega predmeta"; obj.other_obj.second = "drugi";

Ustvarili smo dve novi vrednosti, prvo in drugo, znotraj other_obj.

Brisanje elementa delete obj.name; // vrne: true

Uporabite lahko delete, ki lahko odstrani elemente iz predmetov. Na ta način ne morete izbrisati celotnega predmeta, če pa morate, lahko storite to:

Obj = (); // Ponovno naredi objekt prazen

To je vse, če imate še vedno kakršna koli vprašanja o objektih v JavaScriptu, napišite komentar spodaj, poskušal vam bom pomagati.

To je četrti del prispevkov, posvečenih domačim ekvivalentom metod jQuery. Morda boste želeli prebrati to, preden nadaljujete.

V tem članku si bomo ogledali načine za ustvarjanje, vstavljanje, premikanje in brisanje elementov. In čeprav jQuery že vsebuje veliko število uporabnih metod, boste presenečeni, ko boste izvedeli, da je vse to mogoče enostavno narediti z domačimi metodami.

Manipulacija kode HTML elementov jQuery // get var html = $(elem).html(); // nastavi $(elem).html("Nov html"); Izvorni JS // pridobi var html = elem.innerHTML; // nastavi elem.innerHTML = "Nov html"; Manipulacija besedila elementa jQuery // pridobi var besedilo = $(elem).text(); // nastavi $(elem).text("Novo besedilo"); Izvorni JS // pridobi var text = elem.textContent; // nastavi elem.textContent = "Novo besedilo"; Ustvarjanje elementa jQuery $(""); Izvorni dokument JS.createElement("div"); Doda vsebino na konec elementov jQuery $(parentNode).append(newNode); Izvorni JS parentNode.appendChild(newNode); Doda vsebino na začetek elementov jQuery $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // ali referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Vstavi neposredno pred element jQuery $(referenceNode).before(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // ali referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Vstavi neposredno za elementom jQuery $(referenceNode).after(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // ali referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Opomba: 'beforebegin' in 'afterend' bosta delovala samo, če je referenceNode v drevesu DOM in ima nadrejeni element.

Poglejte naslednje:

ReferenceNode.insertAdjacentElement(položaj, vozlišče);

Metoda insertAdjacentElement ima dva parametra:

• položaj – položaj glede na referenčno vozlišče mora biti nekaj od naslednjega:
  • 'beforebegin' – Pred samim elementom.
  • 'afterbegin' — znotraj elementa, pred prvim otrokom.
  • 'beforeend' – Znotraj elementa, za zadnjim podrejenim elementom.
  • ‘afterend’ – Za samim elementom.
• vozlišče — vozlišče za vstavljanje

Besedilna vsebina

Nekaj ​​besedila Nekaj ​​besedila var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("pred", elem2); // rezultat Some TextSome Text

Metoda insertAdjacentElement je čistejša in bolj intuitivna kot metoda insertBefore, vendar je slednja bolje podprta v starejših brskalnikih.

Večkratno dodajanje elementov

Omeniti velja tudi, da bo dodajanje elementa v vozlišče, ki se nahaja v drevesu DOM, povzročilo ponovno risanje. To ni zelo dobro, ker mora brskalnik znova izračunati velikost in položaj novega elementa, kar bo povzročilo tudi spremembe potomcev elementa, prednikov in elementov, ki se pojavijo za njim v DOM. Če v DOM dodajate veliko elementov, lahko to traja nekaj časa.

Da bi se temu izognili, ga lahko dodate z DocumentFragment. Fragment dokumenta je predmet dokumenta, ki obstaja samo v pomnilniku, zato dodajanje ne bo povzročilo preoblikovanja.

Recimo, da moramo elementu ul, ki je prisoten v drevesu DOM, dodati 100 elementov li:

// Pridobite element, ki bo vseboval naše elemente var ul = document.querySelector("ul"); // naredi 100 elementov seznama za (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

V zgornjem primeru so elementi li dodani neposredno elementu ul, ki se nahaja v drevesu DOM, kar bo povzročilo ponovno risanje ob vsaki ponovitvi - to je 100 sprememb!

Poiščimo boljši način.

// Pridobite element, ki bo vseboval naše elemente var ul = document.querySelector("ul"); // ustvarite fragment dokumenta za dodajanje elementov seznama var docFrag = document.createDocumentFragment(); // naredi 100 elementov seznama 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);

V istem primeru so elementi li dodani fragmentu dokumenta v pomnilniku, tako da se bo preoblikovanje sprožilo, ko je fragment dodan elementu ul. Ta metoda bo zmanjšala število ponovnih izrisov s 100 na 1.

Odstranjevanje elementa jQuery $(referenceNode).remove(); Izvorni JS referenceNode.parentNode.removeChild(referenceNode); // ali referenceNode.remove(); // FF 23.0+, 23.0+, Edge (brez podpore za IE)