Sveiki! Izmantojot JavaScript, jūs varat ne tikai atrast elementus lapā (lasiet par to, kā to izdarīt), bet arī dinamiski izveidot elementus un pievienot tos DOM. Kā to izdarīt, tiks apspriests šajā nodarbībā.

Lai radītu jauns elements tīmekļa lapā — dokumenta objektam ir šādas metodes:

• createElement(elementName) : izveido jaunu elementu, jebkurš HTML lapas tags ir jānodod kā parametrs, atgriež HTML elementu
• CreateTextNode(text) : izveido teksta mezglu un atgriež to pašu.

Elementa pievienošana

Apskatīsim nelielu piemēru:

Var el = document.createElement("div"); var elText = document.createTextNode("Sveika pasaule");

Kā redzams piemērā, mainīgais elem saglabās saiti uz jauno div elementu. Tomēr, kā jūs saprotat, ar elementu izveidi nepietiek, tie joprojām ir jāpievieno tīmekļa lapai. Galu galā, kad mēs šādā veidā veidojam elementus, tie it kā atrodas kaut kādā virtuālajā telpā vai atmiņā, bet, lai tos parādītu tīmekļa lapā, ir īpašas metodes.

Lai tīmekļa lapai pievienotu elementus, tiek izmantotas šādas metodes:

• appendChild(newNode) : pievieno jaunu elementu tā elementa beigām, kurā šī metode tika izsaukta
• insertBefore(newNode, referenceNode) : pievieno jaunu mezglu pirms mezgla, kas norādīts kā otrais parametrs.

Apskatīsim piemēru elementa pievienošanai tīmekļa lapai, izmantojot appendChild metodi:

Raksta nosaukums

Pirmā rindkopa

Otrā rindkopa

var raksts = document.querySelector("div.article"); // izveidot elementu var el = document.createElement("h3"); // izveidot tam tekstu var elTxt = document.createTextNode("Sveika pasaule"); // pievienot elementam tekstu kā bērnelementu el.appendChild(elTxt); // pievienot elementu div blokam article.appendChild(el);

Piemērā tika izveidots parasts h3 galvenes elements un teksta mezgls. Pēc tam teksta mezgls tiek pievienots nosaukuma elementam. Pēc tam virsraksts tiek pievienots vienam no tīmekļa lapas elementiem, lai tas būtu redzams lapā.

Taču, lai elementā izveidotu tekstu, nemaz nav nepieciešams papildu teksta mezgls; šim nolūkam ir rekvizīts textContent, kas ļauj elementam tieši piešķirt tekstu.

Var el = document.createElement("h3"); el.textContent = "Sveiki, es esmu tituls";

Šajā gadījumā teksts tiks izveidots netieši, tieši iestatot tekstu.

Un arī apskatīsim, kā šo elementu pievienot div pakārtoto mezglu kolekcijas sākumam:

Var artDiv = document.querySelector("div.article"); // izveidot elementu var el = document.createElement("h2"); // izveidot tam tekstu var eltxt = document.createTextNode("Sveika pasaule"); // pievienot elementam tekstu kā bērnelementu el.appendChild(eltxt); // iegūt pirmo elementu, pirms kura tiks pievienots var firstEl = artDiv.firstChild.nextSibling; // pievieno elementu div blokam pirms pirmā mezgla artDiv.insertBefore(el, firstEl);

Ja pēkšņi ir jāpievieno jauns mezgls otrajai, trešajai vai jebkurai citai vietai, tad jums ir jāatrod mezgls, pirms kura tas jāievieto, izmantojot šādus rekvizītus firstChild/lastChild vai nextSibling/previousSibling.

Elementa kopēšana

Ir situācijas, kad elementi ir diezgan sarežģīti pēc sastāva, un tos ir vieglāk kopēt. Šim nolūkam tiek izmantota atsevišķa cloneNode() metode.

Var artDiv = document.querySelector("div.article"); // klonēt elementu articleDiv var newArtDiv = artDiv.cloneNode(true); // pievienot ķermeņa elementa beigām document.body.appendChild(newArtDiv);

Jums ir jānodod Būla vērtība kā parametrs metodei cloneNode(): ja nokārtosit true, elements tiks kopēts kopā ar visiem pakārtotajiem mezgliem; ja apstiprināsit false, tas tiks kopēts bez bērnu mezgliem. IN šajā piemērā mēs kopējam elementu kopā ar tā saturu un pievienojam to tīmekļa lapas beigām.

Elementa noņemšana

Lai noņemtu elementu, jums ir jāizsauc metode removeChild(). Šī metode noņems vienu no pakārtotajiem mezgliem:

Var artDiv = document.querySelector("div.article"); // atrodam mezglu, kuru izdzēsīsim - pirmā rindkopa var removNode = document.querySelectorAll("div.article p"); // noņemt mezglu artDiv.removeChild(removNode);

Šis piemērs noņems pirmo rindkopu no div bloka

Elementa nomaiņa

Lai aizstātu vienu elementu ar citu, izmantojiet metodi aizstātChild(newNode, oldNode). Šī metode izmanto jaunu elementu kā 1. parametru, kas aizstāj veco elementu, kas nodots kā 2. parametrs.

Var artDiv = document.querySelector("div.article"); // atrodam mezglu, kuru aizstāsim - pirmā rindkopa var old = document.querySelectorAll("div.article p"); // izveidot elementu var new = document.createElement("h3"); // izveidot tam tekstu var elemtxt = document.createTextNode("Sveika pasaule"); // pievienot elementam tekstu kā bērnelementu new.appendChild(elemtxt); // aizstāt veco mezglu ar jaunu artDiv.replaceChild(new, old);

Šajā piemērā mēs aizstājam pirmo rindkopu ar h2 virsrakstu, ko tikko izveidojām.

REZULTĀTI.

Lai izveidotu elementu, tiek izmantotas šādas metodes:

document.createElement(tag) - izveido jaunu elementu.

document.createTextNode(text) - izveido teksta mezglu

Mezglu ievietošanas un noņemšanas metodes

• parent.appendChild(el) - pievieno elementu esoša elementa beigām
• parent.insertBefore(el, nextSibling) — ievieto elementu pirms esoša elementa
• parent.removeChild(el) - noņem elementu
• parent.replaceChild(newElem, el) - aizstāj vienu elementu ar citu
• parent.cloneNode(bool) - kopē elementu, ja parametrs bool=true, tad elements tiek kopēts ar visiem bērnelementiem, un, ja false, tad bez bērnelementiem

Uzdevumi Elementu ievietošanas funkcija

Uzrakstiet funkciju insertAfter(newEl,oldEl), kas ievieto vienu elementu pēc otra pašā funkcijā, paši elementi tiek nodoti kā parametri.

Ja kādreiz esat rakstījis JavaScript un jums bija jāraksta kaut kas līdzīgs:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Īsta zivs."));
var div = document.createElement("div");
div.setAttribute("id", "new");
div.appendChild(p);

tad tas var jums noderēt.

Problēma: izveidojot vairāk nekā vienu elementu, kas ligzdots viens otrā, kods kļūst ļoti sarežģīts.

Problēmas risināšanai piedāvāju vienkāršu rīku - Create() funkciju (avota kods zemāk). Piemēram, izveidosim teksta rindkopu:
var el = izveidot("p", ( ), "Ardievu, mīlestība!");

Vai arī div ar rindkopu un saiti tajā:
var div = create("div", ( id: "new", stils: "background:#fff"),
izveidot("p", ( līdzināt: "centrs"),
"ievads: ",
izveidot ("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg"),
"bilde"),
": beigas")
);

Vai arī šeit mēs izveidojam tabulu:
var turētājs = document.getElementById("turētājs2");
var tabula;
var td;
holder.appendChild(
tabula =
izveidot("tabula", (id: "neglīts", cols:3),
izveidot("ķermenis", (),
izveidot ("tr", (),
izveidot("td", ( platums: "10%"),
"Sveiki"),
td =
izveidot("td", ( stils: "fons: #fcc"),
"tur")
izveidot("td", ( klase: "special2"), "visur")
)
);

Lūdzu, ņemiet vērā: 1. IE pieprasa tbody elementu, pretējā gadījumā tas atsakās parādīt tabulu.
2. Klases atribūts ir pretrunā ar kaut ko, tāpēc jums tas ir jāraksta kā Class. Šķiet, ka tam nav nekādas ietekmes uz rezultātu.
3. tabula = un tr = piemērā ļauj saglabāt izveidotos ligzdotos objektus turpmākam darbam ar tiem.
4. Šis kods darbojas pārlūkprogrammās IE, Mozilla un Opera. Pati funkcija ir funkcija create(nosaukums, atribūti) (
var el = document.createElement(name);
if (atribūtu veids == "objekts") (
for (var i atribūtos) (
el.setAttribute(i, atribūti[i]);

If (i.toLowerCase() == "klase") (
el.className = atribūti[i]; // IE saderībai

) else if (i.toLowerCase() == "stils") (
el.style.cssText = atribūti[i]; // IE saderībai
}
}
}
for (var i = 2;i< arguments.length; i++) {
var val = argumenti[i];
if (tips val == "virkne") ( val = document.createTextNode(val) );
el.appendChild(val);
}
atgriezties el;
}

Mums jāpateicas Ivanam Kurmanovam par ideju,
Oriģinālais raksts ar darba piemēriem:

noņemt js elementu (12)

1. darbība. Sagatavojiet elementus:

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

2. darbība. Pievienojiet pēc:

elementsParent.insertBefore(newElement, elements.nextSibling);

JavaScript ir insertBefore(), bet kā es varu ievietot elementu pēc citu elementu, neizmantojot jQuery vai citu bibliotēku?

Vienkāršs JavaScript būtu:

Pievienot:

Element.parentNode.insertBefore(newElement, elements);

Pievienot pēc:

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

Bet, lai atvieglotu lietošanu, ievietojiet tur dažus prototipus

Izveidojot šādus prototipus, šo funkciju varēsiet izsaukt tieši no jaunizveidotajiem elementiem.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) Prototype

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

.appendAfter(element)Prototype

Element.prototype.appendAfter = funkcija (elements) ( elements.parentNode.insertBefore(this, elements.nextSibling); ),false;

Un, lai redzētu to darbībā, palaidiet šādu koda fragmentu

/* Pievieno elementu BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Pievieno elementu AFTER NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Tipiska jauna bāreņu elementa objekta izveide un iestatīšana */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Jauns elements"; NewElement.id = "Jauns elements"; /* Pievienot jaunu elementu PIRMS -VAI- PĒC iepriekšminēto prototipu izmantošanas */ NewElement.appendAfter(document.getElementById("Kaimiņš2")); div ( text-align: center; ) #Neighborhood ( krāsa: brūna; ) #NewElement ( krāsa: zaļa; ) Kaimiņš 1 Kaimiņš 2 Kaimiņš 3

Ideālā gadījumā insertAfter jādarbojas līdzīgi kā MDN. Tālāk norādītais kods veiks šādas darbības:

• Ja nav bērnu, tiek pievienots jauns mezgls
• Ja atsauces mezgla nav, tiek pievienots jauns mezgls
• Ja aiz atsauces mezgla ir mezgls, tiek pievienots jauns mezgls
• Ja norādītajam mezglam ir bērni, jaunais mezgls tiek ievietots pirms šī brāļa
• Atgriež jaunu mezglu

Mezgla paplašinājums

Node.prototype.insertAfter = funkcija(mezgls, referenceNode) ( ja (mezgls) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; );

Viens izplatīts piemērs

Node.parentNode.insertAfter(newNode, node);

Skatiet koda darbību

// Vispirms paplašinājiet 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 = "Pirmais jaunais vienums"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Otrais jaunais vienums"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Trešais jaunais vienums"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("māsa pēc"); newNode = document.createElement("li"); newNode.innerText = "Ceturtais jaunais vienums"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); Nav bērnu Nav atsauces mezgla

• Pirmā prece

Pēc tam nav brāļu un māsu

• Pirmā prece

Pēc tam brālis un māsa

• Pirmā prece
• Trešais postenis

Metode insertBefore() tiek izmantota tāpat kā parentNode.insertBefore() . Tātad, lai to atdarinātu un izveidotu vecākuNode.insertAfter() metodi, mēs varam uzrakstīt šādu kodu.

Node.prototype.insertAfter = function(newNode, referenceNode) (atgriež referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // pamatojoties uz karim79"s risinājumu ); // nepieciešamo rokturu iegūšana var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // izveidošana

trešā daļa

var txt = document.createTextNode("trešais punkts"); var rindkopa = document.createElement("p"); rindkopa.appendChild(txt); // tagad to varam saukt tāpat kā insertBefore() parent.insertAfter(paragraph, refElem);

pirmā rindkopa

otrā daļa

Ņemiet vērā, ka DOM paplašināšana var nebūt jums piemērots risinājums, kā norādīts šajā rakstā.

Tomēr šis raksts tika uzrakstīts 2010. gadā, un tagad lietas var būt savādāk. Tāpēc izlemiet paši.

Ļauj rīkoties visos scenārijos

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

Šis kods darbojas, lai ievietotu saites elementu tieši pēc pēdējā esošā pakārtotā ierindošanas mazā css failā

Var raf, cb=function())( //izveidot jaunu mezglu var link=document.createElement("saite"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //ievietot aiz lastnode var nodes=document.getElementsByTagName("saite"); //esošie mezgli var lastnode=document.getElementsByTagName("saite"); lastnode.parentNode.insertBefore(link, lastnode. nākamaisBrālis ); ); //pārbaudiet pirms ievietošanas try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Es zinu, ka uz šo jautājumu jau ir pārāk daudz atbilžu, taču neviena no tām neatbilda manām precīzajām prasībām.

Man ir vajadzīga funkcija, kuras darbība ir tieši pretēja vecākuNode.insertBefore — tas ir, tai ir jāpieņem null referenceNode (kas netiek pieņemta atbildē) un kur insertBefore ievietos beigas ievietotPirms kura viņam vajadzētu ievietot sākums, jo pretējā gadījumā ar šo funkciju vispār nevarētu ielīmēt sākotnējā vietā; tā paša iemesla dēļ ievieto Pirms ievieto beigās.

Tā kā null referenceNode pieprasa insertBefore, mums ir jāzina vecāks — insertBefore ir parentNode metode, tāpēc tam ir piekļuve vecāka mātesuzņēmuma vecākuNode; mūsu funkcija neeksistē, tāpēc mums ir jānodod vecākelements kā parametrs.

Iegūtā funkcija izskatās šādi:

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

kur mezgls1 un mezgls2 ir DOM mezgli.

Šajā rakstā es vēlos jums pastāstīt, kā JavaScript objektam pievienot vai noņemt elementu. Tas ir ļoti vienkārši, taču daudzi iesācēji, tāpat kā es iepriekš, bieži vien par to apjūk.

Izveidosim objektu, piemēram, var obj = ( nosaukums: "alex", uzvārds: "petrov", vietne: "vietne", );

Mums ir vienkāršs objekts, kas satur tādus datus kā vārds, uzvārds un vietne. Dati var būt pilnīgi jebkuri, taču šī ieraksta vajadzībām tie būs tieši tādi.

Jauna elementa pievienošana obj.country = "ru"; // pievienos jauna atslēga"valsts" par objektu ar vērtību "ru" obj["pilsēta"] = "Maskava"; // pievienos arī jaunu atslēgu, tikai "pilsēta" ar vērtību "Maskava"

Iepriekš minētais kods ir skaidrs, bet tikai precizēšanai: objekta sintaksē varat pievienot jaunas vērtības objektam, izmantojot "." un atslēga vai parastais masīva formāts. Ja deklarējat to kā masīvu, tad obj joprojām ir objekts, jo jūs to iepriekš norādījāt, pateicoties () .

Izveidojiet objektu objekta iekšpusē obj.other_obj = (); // izveidot jaunu vērtību other_obj objektā obj un padarīt to par objektu

Tagad pievienosim dažus datus:

Obj.other_obj.first = "jaunā objekta pirmā atslēga"; obj.other_obj.second = "otrais";

Mēs izveidojām divas jaunas vērtības, pirmo un otro, iekšpusē other_obj.

Elementa dzēšana dzēst obj.name; // atgriež: patiess

Varat izmantot dzēšanu, kas var noņemt elementus no objektiem. Jūs nevarat izdzēst visu objektu šādā veidā, bet, ja nepieciešams, varat rīkoties šādi:

Obj = (); // Atkal padara objektu tukšu

Tas arī viss, ja jums joprojām ir kādi jautājumi par JavaScript objektiem, rakstiet komentāru zemāk, es centīšos jums palīdzēt.

Šī ir ceturtā ziņu daļa, kas veltīta jQuery metožu vietējiem ekvivalentiem. Pirms turpināt, iespējams, vēlēsities to izlasīt.

Šajā rakstā apskatīsim veidus, kā izveidot, ievietot, pārvietot un dzēst elementus. Un, lai gan jQuery jau ir daudz noderīgu metožu, jūs būsiet pārsteigts, uzzinot, ka to visu var viegli izdarīt, izmantojot vietējās metodes.

Manipulēšana ar jQuery elementu HTML kodu // get var html = $(elem).html(); // iestatīt $(elem).html("Jauns html"); Native JS // get var html = elem.innerHTML; // set elem.innerHTML = "Jauns html"; jQuery elementa teksta manipulācijas // get var text = $(elem).text(); // iestatīt $(elem).text("Jauns teksts"); Native JS // get var text = elem.textContent; // set elem.textContent = "Jauns teksts"; JQuery elementa izveide $(""); Native JS document.createElement("div"); Pievieno saturu jQuery elementu beigām $(parentNode).append(newNode); Native JS parentNode.appendChild(newNode); Pievieno saturu jQuery elementu sākumam $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // vai referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Ievietot tieši pirms elementa jQuery $(referenceNode).before(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // vai referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Ievietot tieši aiz Element jQuery $(referenceNode).after(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // vai referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Piezīme: “beforebegin” un “afterend” darbosies tikai tad, ja referenceNode atrodas DOM kokā un tam ir vecākelements.

Apskatiet tālāk norādīto.

ReferenceNode.insertAdjacentElement(pozīcija, mezgls);

Metode insertAdjacentElement izmanto divus parametrus:

• pozīcija — pozīcija attiecībā pret atsauces mezglu, ir jābūt vienam no šiem:
  • 'beforebegin' — pirms paša elementa.
  • “afterbegin” — elementa iekšpusē, pirms pirmā bērna.
  • 'beforeend' — elementa iekšpusē, pēc pēdējā bērna.
  • ‘afterend’ — aiz paša elementa.
• mezgls — ievietojams mezgls

Teksta saturs

Daži teksti Daži teksti var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("pirms", elem2); // rezultāts Some TextSome Text

Metode insertAdjacentElement ir tīrāka un intuitīvāka nekā metode insertBefore, taču pēdējā ir labāk atbalstīta vecākās pārlūkprogrammās.

Elementu pievienošana vairākas reizes

Ir arī vērts atzīmēt, ka elementa pievienošana mezglam, kas atrodas DOM kokā, novedīs pie pārzīmēšanas. Tas nav īpaši labi, jo pārlūkprogrammai ir jāpārrēķina jaunā elementa lielums un pozīcija, kas arī novedīs pie izmaiņām elementa pēcnācējos, priekštečos un elementos, kas parādās pēc tā DOM. Ja DOM pievienojat daudz elementu, tas var aizņemt kādu laiku.

Lai no tā izvairītos, varat to pievienot ar DocumentFragment. Dokumenta fragments ir dokumenta objekts, kas eksistē tikai atmiņā, tāpēc pievienošana tam neizraisīs pārpludināšanu.

Pieņemsim, ka mums ir jāpievieno 100 li elementi ul elementam, kas atrodas DOM kokā:

// Iegūstiet elementu, kurā būs mūsu vienumi var ul = document.querySelector("ul"); // izveidot 100 saraksta elementus priekš (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Iepriekš minētajā piemērā li elementi tiek pievienoti tieši ul elementam, kas atrodas DOM kokā, tādējādi katrā iterācijā tiks veikta pārzīmēšana — tas ir 100 izmaiņas!

Atradīsim labāku veidu.

// Iegūstiet elementu, kurā būs mūsu vienumi var ul = document.querySelector("ul"); // izveidot dokumenta fragmentu, lai pievienotu saraksta elementus var docFrag = document.createDocumentFragment(); // izveidot 100 saraksta elementus priekš (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);

Tajā pašā piemērā li elementi tiek pievienoti dokumenta fragmentam atmiņā, lai atkārtota plūsma tiktu aktivizēta, kad fragments tiek pievienots ul elementam. Šī metode samazinās pārzīmējumu skaitu no 100 līdz 1.

JQuery elementa noņemšana $(referenceNode).remove(); Native JS referenceNode.parentNode.removeChild(referenceNode); // vai referenceNode.remove(); // FF 23.0+, 23.0+, Edge (nav IE atbalsta)