Ebben a bejegyzésben azt szeretném elmondani, hogyan lehet elemet hozzáadni vagy eltávolítani egy objektumból JavaScriptben. Nagyon egyszerű, de sok kezdő, mint én korábban, gyakran összezavarodik ettől.

Hozzunk létre egy példaobjektumot

var obj = ( név: "alex", vezetéknév: "petrov", webhely: "oldal", );

Van egy egyszerű objektumunk, amelyen belül olyan adatok találhatók, mint a név (utónév), vezetéknév (vezetéknév) és webhely (webhely). Az adatok teljesen bármiek lehetnek, de a jelen nyilvántartás szempontjából csak az lesz.

Új elem hozzáadása

obj.country = "hu"; // hozzá új kulcs"ország" egy "ru" értékű objektummá obj["city"] = "Moszkva"; // is hozzáad egy új kulcsot, csak a "város" értéket "Moszkva"

A fenti kódban minden világos, de csak az egyértelműség kedvéért: új értékeket adhat hozzá egy objektumhoz az objektum szintaxisában a "." és egy kulcsot, vagy a szokásos tömbformátumot. Ha tömbként deklarálod, akkor az obj továbbra is objektum, mivel korábban így jelölted ki a () -nak köszönhetően.

Hozzon létre egy objektumot egy objektumon belül

obj.other_obj = (); // hozzon létre egy új értéket other_obj az obj-ban, és tegye objektummá

Most adjunk hozzá néhány adatot:

Obj.other_obj.first = "új objektum első kulcsa"; obj.other_obj.second = "második";

Létrehoztunk két új értéket először és másodszor az other_obj-ban.

Elem eltávolítása

objektumnév törlése; // igazat ad vissza

Használhatja a törlést, amely eltávolíthat elemeket az objektumokból. Az egész objektumot így nem törölheti, de ha szüksége van rá, ezt megteheti:

obj = (); // Újra üressé teszi az objektumot

Ez minden, ha még mindig kérdése van a JavaScript-ben lévő objektumokkal kapcsolatban, írjon megjegyzést alább, megpróbálok segíteni.

js elem eltávolítása (12)

1. lépés: Készítse elő az elemeket:

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

2. lépés: Add után:

elementParent.insertBefore(newElement, element.nextSibling);

A JavaScript-ben szerepel az insertBefore() , de hogyan tudok beszúrni egy elemet után egy másik elem nélkül jQuery használatával vagy egy másik könyvtár?

Az egyenes JavaScript a következő lenne:

Hozzáadás:

Element.parentNode.insertBefore(newElement, element);

Hozzáadás után:

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

De a könnyebb használat érdekében dobjon be néhány prototípust

A következő prototípusok elkészítésével ezt a függvényt közvetlenül az újonnan létrehozott elemekből hívhatja meg.

newElement.appendBefore(elem);

newElement.appendAfter(elem);

.appendBefore (elem) Prototípus

Element.prototype.appendBefore = függvény (elem) ( element.parentNode.insertBefore(this, element); ),false;

.appendAfter (elem) Prototípus

Element.prototype.appendAfter = függvény (elem) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

Ha pedig mindent működés közben szeretne látni, futtassa a következő kódrészletet

/* Hozzáadja az elemet BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Hozzáadja az elemet AFTER NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Tipikus létrehozása és beállítása Új árva elemobjektum */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Új elem"; NewElement.id = "NewElement"; /* Új elem hozzáadása ELŐTT -VAGY- UTÁNA A fent említett prototípusok használata */ NewElement.appendAfter(document.getElementById("Szomszéd2")); div ( szövegigazítás: középre; ) #Neighborhood ( szín: barna; ) #NewElement ( szín: zöld; )

Ideális esetben az insertAfternek az MDN-hez hasonlóan kell működnie. Az alábbi kód a következőket fogja tenni:

• Ha nincsenek gyermekei, egy új csomópont kerül hozzáadásra
• Ha nincs referenciacsomópont, egy új csomópont kerül hozzáadásra
• Ha a referencia csomópont csomópont után egy új csomópont kerül hozzáadásra
• Ha ezután a referenciacsomópontnak gyermekei vannak, akkor az új csomópont a testvér elé kerül beillesztésre
• Új csomópontot ad vissza

Csomópont kiterjesztése

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

Egy gyakori példa

Node.parentNode.insertAfter(newNode, node);

Lásd a kód futását

// Első kiterjesztése Node.prototype.insertAfter = function(node, referenceNode) ( if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenciaNode, newNode; newNode = document.createElement("li") newNode.innerText = "Első új elem"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Második új elem"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenciaNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Harmadik új elem"; newNode.style.color = "#FF0000"; referenciaNode.parentNode.insertAfter(newNode, referenceNode); referenciaNode = document.getElementById("testvér-utána"); newNode = document.createElement("li"); newNode.innerText = "Negyedik új elem"; newNode.style.color = "#FF0000"; referenciaNode.parentNode.insertAfter(newNode, referenceNode);

nincs gyerek

Nincs referencia csomópont

• Első tétel

nincs testvér utána

• Első tétel

Testvér utána

• Első tétel
• Harmadik tétel

Az insertBefore() metódus ugyanúgy használatos, mint a parentNode.insertBefore() . Tehát ennek emulálásához és a parentNode.insertAfter() metódus létrehozásához a következő kódot írhatjuk.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // a karim79" megoldása alapján ); // a szükséges fogantyúk lekérése var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // létrehozása

harmadik bekezdés

var txt = document.createTextNode("harmadik bekezdés"); var bekezdés = document.createElement("p"); bekezdés.appendChild(txt); // most ugyanúgy hívhatjuk, mint az insertBefore() parent.insertAfter(paragraph, refElem);

Kérjük, vegye figyelembe, hogy a DOM kiterjesztése nem feltétlenül a megfelelő megoldás az Ön számára, amint az ebben a cikkben is szerepel.

Ez a cikk azonban 2010-ben íródott, és a dolgok most másként alakulhatnak. Szóval döntsd el a tiéd.

Lehetővé teszi az összes forgatókönyv kezelését

Függvény insertAfter(newNode, referenceNode) ( if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenciaNode.nextSibling; if(!referenceNode) document.body.appendChild (újCsomópont); else if(newNode); (!referenceNode.nextSibling) document.body.appendChild(newNode); egyébként referenciaNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); )

Ez a kód úgy működik, hogy beszúr egy hivatkozási elemet közvetlenül az utolsó alárendelt gyermek után, amely egy kis css-fájlba beilleszt

Var raf, cb=function()( //új csomópont létrehozása var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css/ style.css"; //insert a lastnode után var nodes=document.getElementsByTagName("link"); //existing nodes var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode.nextSibling ); ); //ellenőrzés beszúrás előtt try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Tudom, hogy erre a kérdésre már túl sok válasz van, de egyik sem felelt meg a pontos követelményeimnek.

Olyan függvényre van szükségem, amely pontosan ellentétes a parentNode.insertBefore-val- azaz el kell fogadnia egy null referenciaNode-ot (amit válaszként nem fogadunk el), és ahová az insertBefore beilleszti vége insertElőtte be kell illeszteni korai, mivel különben ezzel a funkcióval egyáltalán nem lehetne beilleszteni az eredeti helyre; ugyanezen okból insertBefore beillesztések a végén.

Mivel a null referenceNode megköveteli az insertBefore-t a szülőtől, ismernünk kell a szülőt – az insertBefore egy parentNode metódus, így ily módon hozzáférhet a szülő szülőcsomópontjához; a funkciónk nem létezik, ezért át kell lépnünk szülő elem paraméterként.

Az eredményül kapott függvény így néz ki:

Függvény 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) létrehozza ,

ahol a node1 és a node2 DOM csomópontok.

Szia! A JavaScript használatával nemcsak elemeket találhat az oldalon (olvassa el, hogyan kell ezt megtenni), hanem dinamikusan is létrehozhat elemeket, és hozzáadhatja őket a DOM-hoz. Ebben a leckében arról lesz szó, hogyan kell ezt megtenni.

A létrehozás érdekében új elem egy weboldalon a dokumentumobjektum a következő módszerekkel rendelkezik:

• createElement(elemName): új elemet hoz létre, bármely html oldal címkét át kell adni paraméterként, html elemet ad vissza
• CreateTextNode(szöveg): létrehoz egy szöveges csomópontot, és visszaadja azt.

Elem hozzáadása

Vegyünk egy kis példát:

Varel = document.createElement("div"); var elText = document.createTextNode("Hello World");

Amint a példából látható, az elem változó hivatkozást fog tárolni az új div elemre. Azonban, mint érti, nem elég elemeket létrehozni, mert ezeket még hozzá kell adni a weboldalhoz. Hiszen amikor így hozunk létre elemeket, úgy tűnik, hogy valamiféle virtuális térben vagy a memóriában vannak, de egy weboldalon való megjelenítésükhöz speciális módszerek léteznek.

A következő módszerek használhatók elemek hozzáadásához egy weboldalhoz:

• appendChild(newNode): új elemet ad annak az elemnek a végéhez, amelyen ez a metódus meghívásra került
• insertBefore(newNode, referenceNode): egy új csomópontot ad a második paraméterként megadott csomópont elé.

Nézzünk egy példát egy elem weboldalhoz az appendChild metódussal történő csatolására:

A példában egy normál h3 címsorelem és egy szövegcsomópont jött létre. A szöveges csomópont ezután hozzáadódik a fejléc elemhez. Ezt követően a cím hozzáadódik a weboldal egyik eleméhez, hogy az látható legyen az oldalon.

De nem szükséges további szövegcsomópont az elemen belüli szöveg létrehozásához, ehhez létezik egy textContent tulajdonság, amely lehetővé teszi, hogy közvetlenül hozzárendeljen szöveget egy elemhez.

Var el = document.createElement("h3"); el.textContent = "Üdvözöljük a címet";

Ebben az esetben a szöveg implicit módon jön létre, amikor közvetlenül beállítja a szöveget.

És nézzük meg azt is, hogyan adhatjuk hozzá ezt az elemet a div gyermekcsomópont-gyűjteményének tetejéhez:

VarartDiv = document.querySelector("div.cikk"); // elem létrehozása var el = document CreateElement("h2"); // szöveg létrehozása hozzá var eltxt = document CreateTextNode("Hello World"); // szöveg hozzáadása az elemhez gyermekként el.appendChild(eltxt); // az első hozzáadandó elem lekérése var firstEl = artDiv.firstChild.nextSibling; // elem hozzáadása a div-hez az első csomópont előtt artDiv.insertBefore(el, firstEl);

Ha hirtelen új csomópontot kell hozzáadnia a második, harmadik vagy bármely más helyre, akkor meg kell találnia azt a csomópontot, amely elé ténylegesen be kell illesztenie, a következő tulajdonságok használatával firstChild/lastChild vagy nextSibling/previousSibling.

Elem másolása

Vannak helyzetek, amikor az elemek összetétele meglehetősen összetett, és könnyebb másolni őket. Ehhez egy külön cloneNode() metódust használunk.

VarartDiv = document.querySelector("div.cikk"); // a cikkDiv elem klónozása var newArtDiv = artDiv.cloneNode(true); // hozzáfűzés a body elem végéhez document.body.appendChild(newArtDiv);

A cloneNode() metódust paraméterként kell átadni logikai érték: ha a true értéket adja meg, akkor az elem az összes gyermek csomóponttal együtt másolásra kerül; ha false értéket ad meg, akkor a rendszer gyermek csomópontok nélkül másolja. NÁL NÉL ezt a példát kimásoljuk az elemet a tartalmával együtt, és hozzáadjuk a weboldal végéhez.

Elem eltávolítása

Egy elem eltávolításához hívja meg a removeChild() metódust. Ez a módszer eltávolítja az egyik gyermek csomópontot:

VarartDiv = document.querySelector("div.cikk"); // keresse meg az eltávolítandó csomópontot - az első bekezdés var removNode = document.querySelectorAll("div.article p"); // csomópont eltávolítása artDiv.removeChild(removNode);

Ez a példa eltávolítja az első bekezdést a div blokkból.

Egy elem cseréje

Egy elem másikra cseréléséhez használja a csereChild(newNode, oldNode) metódust. Ez a módszer egy új elemet vesz fel 1. paraméterként, amely lecseréli a 2. paraméterként átadott régi elemet.

VarartDiv = document.querySelector("div.cikk"); // keresse meg a cserélendő csomópontot - az első bekezdés var old = document.querySelectorAll("div.article p"); // elem létrehozása var new = document CreateElement("h3"); // szöveg létrehozása hozzá var elemtxt = document CreateTextNode("Hello world"); // szöveg hozzáadása az elemhez gyermekként new.appendChild(elemtxt); // csere régi csomó new artDiv.replaceChild(new, old);

Ebben a példában az első bekezdést az újonnan létrehozott h2 címsorra cseréljük.

EREDMÉNYEK.

A következő módszerek használhatók egy elem létrehozására:

document.createElement(tag)- új elemet hoz létre.

document.createTextNode(text)- szöveges csomópontot hoz létre

Csomópontok behelyezésének és eltávolításának módszerei

• parent.appendChild(el)- hozzáad egy elemet egy meglévő elem végéhez
• parent.insertBefore(el, nextSibling)- beszúr egy elemet egy meglévő elem elé
• parent.removeChild(el)- eltávolít egy elemet
• parent.replaceChild(newElem, el)- az egyik elemet egy másikra cseréli
• parent.cloneNode(bool)— kimásolja az elemet, ha a bool=true paraméter, akkor az elemet minden gyermek elemmel másolja, ha false, akkor gyermekelemek nélkül

Feladatok

Funkció elemek beillesztésére

Írjon egy insertAfter(newEl, oldEl) függvényt, amely egy-egy elemet beszúr magába a függvénybe, maguk az elemek paraméterként kerülnek átadásra.