Hallå! Med JavaScript kan du inte bara hitta element på en sida (läs om hur du gör detta) utan även skapa element dynamiskt och lägga till dem i DOM. Hur man gör detta kommer att diskuteras i den här lektionen.

För att skapa nytt element på en webbsida - dokumentobjektet har följande metoder:

• createElement(elementName): skapar ett nytt element, en HTML-tagg måste skickas som en parameter, returnerar ett HTML-element
• createTextNode(text) : Skapar en textnod och returnerar densamma.

Lägga till ett element

Låt oss titta på ett litet exempel:

Var el = document.createElement("div"); var elText = document.createTextNode("Hej världen");

Som du kan se i exemplet kommer variabeln elem att lagra en länk till det nya div-elementet. Men som du förstår är det inte tillräckligt att skapa element, de måste fortfarande läggas till på webbsidan. När vi skapar element på det här sättet verkar de trots allt vara i något slags virtuellt utrymme eller i minnet, men för att visa dem på en webbsida finns det speciella metoder.

Följande metoder används för att lägga till element på en webbsida:

• appendChild(newNode): lägger till ett nytt element i slutet av elementet som denna metod anropades på
• insertBefore(newNode, referenceNode): lägger till en ny nod före den nod som anges som den andra parametern.

Låt oss titta på ett exempel på att bifoga ett element till en webbsida med metoden appendChild:

Artikelrubrik

Första paragrafen

Andra stycket

var article = document.querySelector("div.article"); // skapa ett element var el = document.createElement("h3"); // skapa text för det var elTxt = document.createTextNode("Hej världen"); // lägg till text till elementet som ett underordnat element el.appendChild(elTxt); // lägg till ett element i div-blocket article.appendChild(el);

Exemplet skapade ett normalt h3-huvudelement och en textnod. Textnoden läggs sedan till i titelelementet. Titeln läggs sedan till i ett av webbsidans element så att den kan ses på sidan.

Men det är inte alls nödvändigt att ha en extra textnod för att skapa text inuti ett element, för detta finns egenskapen textContent, som gör att du direkt kan tilldela text till ett element.

Var el = document.createElement("h3"); el.textContent = "Hej jag är titeln";

I det här fallet kommer texten att skapas implicit när texten ställs in direkt.

Och låt oss också titta på hur man lägger till detta element i början av en samling av barnnoder för en div:

Var artDiv = document.querySelector("div.article"); // skapa ett element var el = document.createElement("h2"); // skapa text för det var eltxt = document.createTextNode("Hej världen"); // lägg till text till elementet som ett underordnat element el.appendChild(eltxt); // få det första elementet som kommer att föregås av tillägget var firstEl = artDiv.firstChild.nextSibling; // lägg till ett element i div-blocket före den första noden artDiv.insertBefore(el, firstEl);

Om du plötsligt behöver lägga till en ny nod till den andra, tredje eller någon annan plats, måste du hitta noden före vilken du behöver infoga den med hjälp av följande egenskaper firstChild/lastChild eller nextSibling/previousSibling.

Kopiera ett element

Det finns situationer när elementen är ganska komplexa i sammansättning, och det är lättare att kopiera dem. En separat cloneNode()-metod används för detta.

Var artDiv = document.querySelector("div.article"); // klona artikelDiv-elementet var newArtDiv = artDiv.cloneNode(true); // lägg till i slutet av bodyelementet document.body.appendChild(newArtDiv);

Du måste skicka ett booleskt värde som en parameter till metoden cloneNode(): om du skickar true, kommer elementet att kopieras tillsammans med alla underordnade noder; om du skickar falskt, kommer det att kopieras utan underordnade noder. I i detta exempel vi kopierar elementet tillsammans med dess innehåll och lägger till det i slutet av webbsidan.

Ta bort ett element

För att ta bort ett element måste du anropa metoden removeChild(). Den här metoden tar bort en av barnnoderna:

Var artDiv = document.querySelector("div.article"); // hitta noden som vi kommer att ta bort - det första stycket var removNode = document.querySelectorAll("div.article p"); // ta bort noden artDiv.removeChild(removNode);

Det här exemplet tar bort det första stycket från div-blocket

Byte av ett element

För att ersätta ett element med ett annat, använd metoden replaceChild(newNode, oldNode). Denna metod tar ett nytt element som den första parametern, som ersätter det gamla elementet som skickats som den andra parametern.

Var artDiv = document.querySelector("div.article"); // hitta noden som vi kommer att ersätta - det första stycket var old = document.querySelectorAll("div.article p"); // skapa ett element var new = document.createElement("h3"); // skapa text för det var elemtxt = document.createTextNode("Hej världen"); // lägg till text till elementet som ett underordnat element new.appendChild(elemtxt); // ersätt den gamla noden med en ny artDiv.replaceChild(ny, gammal);

I det här exemplet ersätter vi det första stycket med h2-rubriken vi just skapade.

RESULTAT.

För att skapa ett element används följande metoder:

document.createElement(tag) - skapar ett nytt element.

document.createTextNode(text) - skapar en textnod

Metoder för att infoga och ta bort noder

• parent.appendChild(el) - lägger till ett element i slutet av ett befintligt element
• parent.insertBefore(el, nextSibling) - infogar ett element före ett befintligt element
• parent.removeChild(el) - tar bort ett element
• parent.replaceChild(newElem, el) - ersätter ett element med ett annat
• parent.cloneNode(bool) - kopierar ett element, om parametern bool=true kopieras elementet med alla underordnade element, och om det är false utan underordnade element

Uppgifter Funktion för att infoga element

Skriv en funktion insertAfter(newEl,oldEl) som infogar det ena elementet efter det andra i själva funktionen, själva elementen skickas som parametrar.

Om du någonsin har skrivit JavaScript och var tvungen att skriva något i stil med:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Riktig fiskfisk."));
var div = document.createElement("div");
div.setAttribute("id", "ny");
div.appendChild(p);

då kan detta vara användbart för dig.

Problem: När du skapar mer än ett element kapslat inuti varandra, blir koden mycket komplex.

Jag erbjuder ett enkelt verktyg för att lösa problemet - create()-funktionen (källkoden nedan). Låt oss till exempel skapa ett stycke med text:
var el = create("p", ( ), "Farväl, kärlek!");

Eller en div med ett stycke och en länk inuti:
var div = create("div", ( id: "new", style: "background:#fff" ),
create("p", ( align: "center" ),
"introduktion:",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"bild"),
": slutet")
);

Eller här gör vi en tabell:
var holder = document.getElementById("holder2");
var tabell;
var td;
holder.appendChild(
tabell =
create("tabell", (id: "ful", cols:3),
create("tbody", (),
create("tr", (),
create("td", ( bredd: "10%" ),
"Hallå"),
td =
create("td", (stil: "bakgrund: #fcc" ),
"där")
create("td", ( Klass: "special2"), "överallt")
)
);

Observera: 1. IE kräver ett tbody-element, annars vägrar den att visa tabellen.
2. Klassattributet står i konflikt med något, så du måste skriva det som Klass. Detta verkar inte ha någon effekt på resultatet.
3. table = och tr = i exemplet låter dig spara de skapade kapslade objekten för vidare arbete med dem.
4. Den här koden fungerar i IE, Mozilla och Opera. Själva funktionen funktionen skapa (namn, attribut) (
var el = document.createElement(namn);
if (typ av attribut == "objekt") (
för (var i i attribut) (
el.setAttribute(i, attribut[i]);

If (i.toLowerCase() == "klass") (
el.klassnamn = attribut[i]; // för IE-kompatibilitet

) else if (i.toLowerCase() == "stil") (
el.style.cssText = attribut[i]; // för IE-kompatibilitet
}
}
}
för (var i = 2;i< arguments.length; i++) {
var val = argument[i];
if (typval == "sträng") ( val = document.createTextNode(val) );
el.appendChild(val);
}
återvända el;
}

Vi borde tacka Ivan Kurmanov för idén,
Originalartikel med fungerande exempel:

ta bort js element (12)

Steg 1. Förbered elementen:

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

Steg 2. Lägg till efter:

elementParent.insertBefore(newElement, element.nextSibling);

JavaScript har insertBefore() men hur kan jag infoga ett element efter ett annat element utan att använda jQuery eller något annat bibliotek?

Enkelt JavaScript skulle vara:

Lägg till:

Element.parentNode.insertBefore(newElement, element);

Lägg till efter:

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

Men, släng några prototyper där för enkel användning

Genom att skapa följande prototyper kommer du att kunna anropa denna funktion direkt från de nyskapade elementen.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) Prototyp

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

.appendAfter(element)Prototyp

Element.prototype.appendAfter = funktion (element) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

Och för att se det i aktion, kör följande kodavsnitt

/* Lägger till element BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Lägger till element AFTER NeighborElement */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Typiskt skapande och inställning av ett nytt föräldralöst elementobjekt */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Nytt element"; NewElement.id = "NewElement"; /* Lägg till NewElement INNAN -ELLER- EFTER användning av ovannämnda prototyper */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( text-align: center; ) #Neighborhood ( färg: brun; ) #NewElement ( färg: grön; ) Neighbor 1 Neighbor 2 Neighbor 3

Helst borde insertAfter fungera på samma sätt som MDN. Koden nedan kommer att göra följande:

• Om det inte finns några barn läggs en ny nod till
• Om det inte finns någon referensnod läggs en ny nod till
• Om det finns en nod efter referensnoden läggs en ny nod till
• Om den refererade noden sedan har barn, infogas den nya noden före det syskonet
• Returnerar en ny nod

Nodförlängning

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

Ett allmänt exempel

Node.parentNode.insertAfter(newNode, node);

Se kod som körs

// Förläng först Node.prototype.insertAfter = function(node, referenceNode) ( if (nod) this.insertBefore(nod, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "Första nya objektet"; newNode.style.color = "#FF0000"; document.getElementById("inga-barn").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Andra nya objektet"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("ingen-syskon-efter"); newNode = document.createElement("li"); newNode.innerText = "Tredje nya objektet"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("syskon-efter"); newNode = document.createElement("li"); newNode.innerText = "Fjärde nya objektet"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); Inga barn Ingen referensnod

• Första objektet

Inga syskon efter

• Första objektet

Syskon efter

• Första objektet
• Tredje objektet

Metoden insertBefore() används som parentNode.insertBefore() . Så för att emulera detta och göra en parentNode.insertAfter()-metod kan vi skriva följande kod.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // baserat på karim79s lösning ); // att få nödvändiga handtag var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // create

punkt tre

var txt = document.createTextNode("stycke tre"); var paragraph = document.createElement("p"); paragraph.appendChild(txt); // nu kan vi kalla det på samma sätt som insertBefore() parent.insertAfter(paragraph, refElem);

stycke ett

stycke två

Observera att DOM-expansion kanske inte är rätt lösning för dig, som anges i den här artikeln.

Den här artikeln skrevs dock 2010 och saker och ting kan vara annorlunda nu. Så bestäm själv.

Låter dig hantera alla scenarier

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

Den här koden fungerar för att infoga ett länkelement direkt efter det sista befintliga underordnade inlining för att infoga en liten css-fil

Var raf, cb=function())( //create newnode var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //infoga efter lastnoden var nodes=document.getElementsByTagName("länk"); //befintliga noder var lastnode=document.getElementsByTagName("länk"); lastnode.parentNode.insertBefore(länk, lastnode. nästaSyskon ); ); //kontrollera innan du sätter in försök ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) catch(err)( raf=false; ) if (raf)raf(cb); else window.addEventListener("load",cb);

Jag vet att det redan finns för många svar på den här frågan, men inget av dem uppfyllde mina exakta krav.

Jag behöver en funktion som har det raka motsatta beteendet av parentNode.insertBefore - det vill säga den ska acceptera en nollreferensNode (som inte accepteras som svar) och där insertBefore kommer att infogas i slutet infoga Innan som han ska infoga i början, eftersom det annars inte skulle finnas något sätt att klistra in på den ursprungliga platsen med den här funktionen alls; av samma anledning infogarBefore infogar i slutet.

Eftersom en nollreferensNode kräver att du infogar föräldern, måste vi veta att föräldern - insertBefore är en metod för parentNode , så den har åtkomst till förälderns förälderNode på det sättet; vår funktion existerar inte, så vi måste skicka det överordnade elementet som en parameter.

Den resulterande funktionen ser ut så här:

Funktion 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) skapar ,

där nod1 och nod2 är DOM-noder.

I det här inlägget vill jag berätta hur du lägger till eller tar bort ett element från ett objekt i JavaScript. Det är väldigt enkelt, men många nybörjare, som jag tidigare, blir ofta förvirrade över det.

Låt oss skapa ett objekt till exempel var obj = (namn: "alex", efternamn: "petrov", webbplats: "webbplats", );

Vi har ett enkelt objekt som innehåller data som namn, efternamn och webbplats. Uppgifterna kan vara absolut vad som helst, men för detta inläggs syften kommer det att vara exakt det.

Lägga till ett nytt element obj.country = "ru"; // kommer att lägga till ny nyckel"land" till ett objekt med värdet "ru" obj["city"] = "Moskva"; // kommer också att lägga till en ny nyckel, bara "stad" med värdet "Moskva"

Koden ovan är tydlig, men bara för att förtydliga: du kan lägga till nya värden till ett objekt i objektsyntax med "." och nyckeln eller det vanliga arrayformatet. Om du deklarerar det som en array är obj fortfarande ett objekt, eftersom du tidigare betecknade det så tack vare () .

Skapa ett objekt inuti ett objekt obj.other_obj = (); // skapa ett nytt värde other_obj i obj och gör det till ett objekt

Låt oss nu lägga till lite data där:

Obj.other_obj.first = "första nyckeln för det nya objektet"; obj.other_obj.second = "andra";

Vi skapade två nya värden, första och andra, inuti other_obj.

Ta bort ett element delete obj.name; // returnerar: sant

Du kan använda delete , som kan ta bort element från objekt. Du kan inte ta bort hela objektet på det här sättet, men om du behöver kan du göra så här:

Obj = (); // Gör objektet tomt igen

Det är allt, om du fortfarande har några frågor om objekt i JavaScript, skriv en kommentar nedan, jag ska försöka hjälpa dig.

Detta är den fjärde delen av inlägg som ägnas åt inhemska motsvarigheter till jQuery-metoder. Du kanske vill läsa detta innan du fortsätter.

I den här artikeln kommer vi att titta på sätt att skapa, infoga, flytta och ta bort element. Och även om jQuery redan innehåller ett stort antal användbara metoder, kommer du att bli förvånad över att lära dig att allt detta enkelt kan göras med hjälp av inhemska metoder.

Manipulera HTML-kod för jQuery-element // get var html = $(elem).html(); // set $(elem).html("Ny html"); Native JS // get var html = elem.innerHTML; // set elem.innerHTML = "Ny html"; jQuery element textmanipulation // get var text = $(elem).text(); // set $(elem).text("Ny text"); Native JS // get var text = elem.textContent; // set elem.textContent = "Ny text"; Skapa ett jQuery-element $(""); Native JS document.createElement("div"); Lägger till innehåll i slutet av jQuery-element $(parentNode).append(newNode); Native JS parentNode.appendChild(newNode); Lägger till innehåll i början av jQuery-element $(referenceNode).prepend(newNode); Native JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // eller referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Infoga direkt före ett element jQuery $(referenceNode).before(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // eller referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Infoga direkt efter ett element jQuery $(referenceNode).after(newNode); Native JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // eller referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Notera: 'beforebegin' och 'afterend' fungerar bara om referensnoden finns i DOM-trädet och har ett överordnat element.

Titta på följande:

ReferenceNode.insertAdjacentElement(position, nod);

Metoden insertAdjacentElement tar två parametrar:

• position - position i förhållande till referensnod, måste vara något av följande:
  • 'beforebegin' - före själva elementet.
  • ’efterbörjan’ — Inuti elementet, före det första barnet.
  • 'beforeend' - Inuti elementet, efter det sista barnet.
  • ’afterend’ – Efter själva elementet.
• nod — nod att infoga

Textinnehåll

Viss text Viss text var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("beforeend", elem2); // resultat Lite text. Någon text

Metoden insertAdjacentElement är renare och mer intuitiv än metoden insertBefore, men den senare stöds bättre i äldre webbläsare.

Lägger till element flera gånger

Det är också värt att notera att lägga till ett element i en nod som finns i DOM-trädet kommer att leda till omritning. Detta är inte särskilt bra eftersom webbläsaren måste räkna om storleken och positionen för det nya elementet, vilket också kommer att leda till ändringar av elementets ättlingar, förfäder och element som visas efter det i DOM. Om du lägger till många element till DOM kan detta ta lite tid.

För att undvika detta kan du lägga till det med DocumentFragment. Ett dokumentfragment är ett dokumentobjekt som bara finns i minnet, så att lägga till det kommer inte att orsaka något återflöde.

Låt oss säga att vi behöver lägga till 100 li-element till ett ul-element som finns i DOM-trädet:

// Hämta elementet som kommer att innehålla våra objekt var ul = document.querySelector("ul"); // gör 100 listelement för (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

I exemplet ovan läggs li-elementen direkt till ul-elementet, som finns i DOM-trädet, vilket kommer att resultera i en omritning vid varje iteration - det är 100 ändringar!

Låt oss hitta ett bättre sätt.

// Hämta elementet som kommer att innehålla våra objekt var ul = document.querySelector("ul"); // skapa ett dokumentfragment för att lägga till listelementen till var docFrag = document.createDocumentFragment(); // gör 100 listelement för (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);

I samma exempel läggs li-elementen till dokumentfragmentet i minnet, så att återflödet utlöses när fragmentet läggs till i ul-elementet. Denna metod kommer att minska antalet omdragningar från 100 till 1.

Ta bort ett jQuery-element $(referenceNode).remove(); Native JS referenceNode.parentNode.removeChild(referenceNode); // eller referensNode.remove(); // FF 23.0+, 23.0+, Edge (inget stöd för IE)