JavaScript – Arbeiten mit DOM-Elementen. Ein Element erstellen. JavaScript - DOM: Knoten hinzufügen und entfernen. Einfügen eines Elements in das Dom-Javascript

Wenn Sie ein HTML-Element erstellen müssen und nicht wissen, wie Sie es implementieren, sind Sie bei uns genau richtig. In diesem Artikel wird nicht nur ein Beispiel für die Erstellung eines Elements betrachtet, sondern auch eine universelle Funktion geschrieben, mit der Sie ein neues Element erstellen, ihm verschiedene Attribute hinzufügen und es mit Text füllen können.

Aber beginnen wir zunächst mit etwas Einfachem. Beim Erstellen eines neuen Elements verwenden wir die Methoden des DOM-Objekts, nämlich:

* document.createElement(param) – diese Methode wird direkt zum Erstellen eines Elements verwendet. Als Parameter wird der Name des zu erstellenden Elements verwendet. Gibt einen Link zum erstellten Element zurück.

document.createElement('div'); // erstellt ein div-Element.

* document.appendChild(param) – diese Methode wird verwendet, um dem HTML-Code ein Element hinzuzufügen. Akzeptiert einen Link zum erstellten Element als Parameter;

var parent = document.getElementsByTagName("BODY"); //Erhalte einen Link zum Body-Element

var elem = document.createElement(‘div’);// erstellt ein div-Element

parent.appendChild(elem); // fügt ein Element hinzu, wobei parent der Link ist, zu dem unser Element hinzugefügt wird, in diesem Fall ist es der Körper body;

* document.createTextNode() – die Methode wird verwendet, um Text innerhalb eines Elements zu platzieren.

Ein Beispiel für die Erstellung eines Elements.

Funktion createElem() (

Var newP = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "myPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

Var text = "einzufügender Text";

Var textNode = document.createTextNode(text);

NewP.appendChild(textNode);

Parent.appendChild(newP);

In der Funktion „createElem“ ist die übergeordnete Variable ein Verweis auf das Element (Körper), in dem das neue Element platziert wird. Dann wird ein neues Element P erstellt, ihm werden die Attribute id, class, style hinzugefügt und die Werte dieser Attribute werden festgelegt. Anschließend wird ein Textknoten erstellt und unserem neuen Element hinzugefügt. Nach all dem wird das Element selbst dem Körperkörper hinzugefügt. Um eine große Anzahl neuer Elemente zu erstellen, müssen Sie hart arbeiten, denn... Möglicherweise müssen Sie sie an verschiedenen Stellen auf der Webseite platzieren, z. B. an verschiedenen Elementen befestigen.

Ein Beispiel für die Erstellung eines Elements mithilfe einer universellen Funktion.

Mit dieser Funktion können Sie ein neues Element erstellen, verschiedene Attribute hinzufügen, einen Textknoten daran anhängen, ihn vor oder nach dem angegebenen Element platzieren oder das Element durch ein neu erstelltes Element ersetzen. Es ist nur das Namensargument erforderlich.

Funktion createElement(name, attrs, style, text, past_id, position, changes) (

Var parent = document.getElementsByTagName("BODY");

Var e = document.createElement(name);

Wenn (attrs) (

Für (Attribute eingeben) (

If (key == "class") (

E.className = attrs;

) else if (key == "id") (

E.id = attrs;

) anders (

E.setAttribute(key, attrs);

Wenn (Stil) (

Für (Schlüssel im Stil) (

E.style = Stil;

Wenn (Text) (

E.appendChild(document.createTextNode(text));

Parent.appendChild(e);

If(past_id)(

Var old_elem = document.getElementById(past_id);

If(position=="before")(

Parent.insertBefore(e,old_elem)

)else if(position=="after")(

InsertAfter(parent,e,old_elem);

If(changed!="" && changes==true)(

Parent.removeChild(old_elem);

Optionen:

Name – Elementname;

Attrs – Attribute des erstellten Elements;

Stil – Stile des erstellten Elements;

Text – eingefügter Text;

Past_id – ID des Elements, neben dem sich unser Element befinden wird;

Position – kann vorher und nachher zwei Werte annehmen;

Geändert – ein Flag, das zwei Werte annimmt: true oder false. Wenn dieser Parameter auf true gesetzt ist, wird das alte Element durch ein neues ersetzt;

Als Beispiel erstellen wir ein DIV-Element mit Attributen und ersetzen das alte Element durch das neu erstellte.

createElement("div",

(„class“: „myDivCSSClass“, „id“: „myDivId“, „align“: „center“),

(„Breite“: „200px“, „Höhe“: „250px“, „Hintergrund“: „#3B9D00“, „Farbe“: „#fff“),

„Hier ist mein Text“,

"prüfen",

"Vor"

Letzte Aktualisierung: 01.11.2015

Um Elemente zu erstellen, verfügt das Dokumentobjekt über die folgenden Methoden:

createElement(elementName) : Erstellt ein HTML-Element, dessen Tag als Parameter übergeben wird. Gibt das erstellte Element zurück

createTextNode(text) : Erstellt einen Textknoten und gibt ihn zurück. Der Knotentext wird als Parameter übergeben.

Die Variable elem speichert also einen Verweis auf das div-Element. Das bloße Erstellen von Elementen reicht jedoch nicht aus; sie müssen der Webseite noch hinzugefügt werden.

Um Elemente hinzuzufügen, können wir eine der Methoden des Node-Objekts verwenden:

appendChild(newNode) : Fügt einen neuen Knoten newNode am Ende der Sammlung untergeordneter Knoten hinzu

insertBefore(newNode, referenceNode): Fügt einen neuen Knoten newNode vor dem referenceNode hinzu

Wir verwenden die appendChild-Methode:

Artikelüberschrift

Erster Paragraph

Zweiter Absatz

Zuerst erstellen wir ein reguläres h2-Header-Element und einen Textknoten. Dann fügen wir dem Header-Element einen Textknoten hinzu. Dann fügen wir den Titel zu einem der Elemente der Webseite hinzu:

Wir müssen jedoch keinen zusätzlichen Textknoten erstellen, um Text innerhalb eines Elements zu definieren, da wir die Eigenschaft textContent verwenden und ihr Text direkt zuweisen können:

Var elem = document.createElement("h2"); elem.textContent = "Hallo Welt";

In diesem Fall wird der Textknoten implizit beim Setzen des Textes erstellt.

Schauen wir uns nun an, wie man ein ähnliches Element am Anfang der Sammlung untergeordneter Knoten eines div-Blocks hinzufügt:

Var ArticleDiv = document.querySelector("div.article"); // ein Element erstellen var elem = document.createElement("h2"); // Text dafür erstellen var elemText = document.createTextNode("Hello world"); // Text als untergeordnetes Element zum Element hinzufügen elem.appendChild(elemText); // das erste Element abrufen, dem der Zusatz vorangestellt wird var firstElem = ArticleDiv.firstChild.nextSibling; // füge ein Element zum div-Block vor dem ersten Knoten hinzu ArticleDiv.insertBefore(elem, firstElem);

Wenn wir einen neuen Knoten an der zweiten, dritten oder einer anderen Stelle einfügen müssen, müssen wir den Knoten finden, vor dem wir einfügen müssen, indem wir Kombinationen der Eigenschaften firstChild/lastChild und nextSibling/ previousSibling verwenden.

Manchmal sind Elemente in ihrer Zusammensetzung recht komplex und es ist viel einfacher, sie zu kopieren, als aus ihnen mithilfe separater Aufrufe Inhalte zu erstellen. Um vorhandene Knoten aus einem Node-Objekt zu kopieren, können Sie die Methode cloneNode() verwenden:

Var ArticleDiv = document.querySelector("div.article"); // das ArticleDiv-Element klonen var newArticleDiv = ArticleDiv.cloneNode(true); // am Ende des Body-Elements hinzufügen document.body.appendChild(newArticleDiv);

Der cloneNode()-Methode wird ein boolescher Wert als Parameter übergeben: Wenn true übergeben wird, wird das Element mit allen untergeordneten Knoten kopiert; Wenn false übergeben wird, wird es ohne untergeordnete Knoten kopiert. Das heißt, in diesem Fall kopieren wir den Knoten mit seinem gesamten Inhalt und fügen ihn dann am Ende des Body-Elements hinzu.

Um ein Element zu entfernen, rufen Sie die Methode „removeChild()“ des Node-Objekts auf. Diese Methode entfernt einen der untergeordneten Knoten:

Var ArticleDiv = document.querySelector("div.article"); // Den Knoten finden, den wir löschen möchten – den ersten Absatz var abnehmbarNode = document.querySelectorAll("div.article p"); // Knoten entfernen ArticleDiv.removeChild(removableNode);

In diesem Fall wird der erste Absatz aus dem div-Block entfernt

Um ein Element zu ersetzen, verwenden Sie die Methode replaceChild(newNode, oldNode) des Node-Objekts. Diese Methode verwendet ein neues Element als ersten Parameter, der das alte Element oldNode ersetzt, das als zweiter Parameter übergeben wurde.

Var ArticleDiv = document.querySelector("div.article"); // den Knoten finden, den wir ersetzen werden – den ersten Absatz var oldNode = document.querySelectorAll("div.article p"); // ein Element erstellen var newNode = document.createElement("h2"); // Text dafür erstellen var elemText = document.createTextNode("Hello world"); // Text als untergeordnetes Element zum Element hinzufügen newNode.appendChild(elemText); // den alten Knoten durch einen neuen ersetzen ArticleDiv.replaceChild(newNode, oldNode);

In diesem Fall ersetzen wir den ersten Absatz durch eine h2-Überschrift.

In diesem Beitrag möchte ich Ihnen erklären, wie Sie in JavaScript ein Element zu einem Objekt hinzufügen oder daraus entfernen. Es ist sehr einfach, aber viele Anfänger, wie ich zuvor, sind oft verwirrt darüber.

Wir haben ein einfaches Objekt, das Daten wie Name, Nachname und Website enthält. Die Daten können absolut alles sein, aber für die Zwecke dieses Beitrags wird es genau das sein.

Der obige Code ist klar, aber nur zur Verdeutlichung: Sie können einem Objekt in der Objektsyntax neue Werte hinzufügen, indem Sie „.“ verwenden. und der Schlüssel oder das übliche Array-Format. Wenn Sie es als Array deklarieren, ist obj immer noch ein Objekt, da Sie es zuvor dank () so bezeichnet haben.

Nun fügen wir dort einige Daten hinzu:

Obj.other_obj.first = "erster Schlüssel des neuen Objekts"; obj.other_obj.second = "second";

Wir haben in other_obj zwei neue Werte erstellt, den ersten und den zweiten.

Sie können delete verwenden, um Elemente aus Objekten zu entfernen. Sie können auf diese Weise nicht das gesamte Objekt löschen, aber bei Bedarf können Sie Folgendes tun:

Obj = (); // Macht das Objekt wieder leer

Das ist alles, wenn Sie noch Fragen zu Objekten in JavaScript haben, schreiben Sie unten einen Kommentar, ich werde versuchen, Ihnen zu helfen.

Schritt 1. Bereiten Sie die Elemente vor:

Schritt 2. Nachher hinzufügen:

JavaScript hat insertBefore(), aber wie kann ich ein Element einfügen? nach ein anderes Element ohne Verwendung von jQuery oder einer anderen Bibliothek?

Hinzufügen:

Element.parentNode.insertBefore(newElement, element);

Füge danach hinzu:

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

Durch die Erstellung der folgenden Prototypen können Sie diese Funktion direkt aus den neu erstellten Elementen aufrufen.

newElement.appendBefore(element);

newElement.appendAfter(element);

.appendBefore(element) Prototyp

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

.appendAfter(element)Prototype

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

/* Fügt Element VOR NeighborElement hinzu */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Fügt Element NACH NeighborElement hinzu */ Element.prototype.appendAfter = function(element) ( element.parentNode.insertBefore(this, element.nextSibling); ), false; /* Typische Erstellung und Einrichtung eines neuen verwaisten Elementobjekts */ var NewElement = document.createElement("div"); NewElement.innerHTML = "Neues Element"; NewElement.id = "NewElement"; /* NewElement VOR – ODER – NACH der Verwendung der oben genannten Prototypen hinzufügen */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( text-align: center; ) #Neighborhood ( color: brown; ) #NewElement ( color: green; ) Neighbor 1 Neighbor 2 Neighbor 3

Im Idealfall sollte insertAfter ähnlich wie MDN funktionieren. Der folgende Code führt Folgendes aus:

• Wenn keine Kinder vorhanden sind, wird ein neuer Knoten hinzugefügt
• Wenn kein Referenzknoten vorhanden ist, wird ein neuer Knoten hinzugefügt
• Wenn nach dem Referenzknoten ein Knoten vorhanden ist, wird ein neuer Knoten hinzugefügt
• Wenn der referenzierte Knoten dann untergeordnete Knoten hat, wird der neue Knoten vor diesem Geschwister eingefügt
• Gibt einen neuen Knoten zurück

Knotenerweiterung

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

Ein allgemeines Beispiel

Node.parentNode.insertAfter(newNode, node);

Siehe ausgeführten Code

// Zuerst verlängern 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 = "Erstes neues Element"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); newNode = document.createElement("li"); newNode.innerText = "Zweites neues Element"; newNode.style.color = "#FF0000"; document.getElementById("no-reference-node").insertAfter(newNode); referenceNode = document.getElementById("no-sibling-after"); newNode = document.createElement("li"); newNode.innerText = „Drittes neues Element“; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById("sibling-after"); newNode = document.createElement("li"); newNode.innerText = "Viertes neues Element"; newNode.style.color = "#FF0000"; referenceNode.parentNode.insertAfter(newNode, referenceNode); Keine Kinder. Kein Referenzknoten

• Erster Gegenstand

• Erster Gegenstand

• Erster Gegenstand
• Dritter Punkt

Die Methode insertBefore() wird wie parentNode.insertBefore() verwendet. Um dies zu emulieren und eine parentNode.insertAfter()-Methode zu erstellen, können wir den folgenden Code schreiben.

Node.prototype.insertAfter = function(newNode, referenceNode) ( return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); // basierend auf karim79s Lösung ); // Erforderliche Handles abrufen var refElem = document.getElementById(" pTwo"); var parent = refElem.parentNode; // Creating

Absatz drei

Absatz eins

Absatz zwei

Bitte beachten Sie, dass die DOM-Erweiterung möglicherweise lautet Fehlentscheidung für Sie, wie in diesem Artikel beschrieben.

Allerdings wurde dieser Artikel im Jahr 2010 geschrieben und die Dinge könnten jetzt anders sein. Entscheiden Sie also selbst.

Ermöglicht Ihnen die Bewältigung aller Szenarien

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

Mit diesem Code wird direkt nach dem letzten vorhandenen untergeordneten Element ein Linkelement eingefügt, um eine kleine CSS-Datei zu inlineieren

Var raf, cb=function())( //neuen Knoten erstellen var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //nach dem Lastnode einfügen var nodes=document.getElementsByTagName("link"); //vorhandene Knoten var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode. nextSibling ); ); // vor dem Einfügen prüfen try ( raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; ) Catch(err)( raf=false; ) if (raf)raf(cb); sonst window.addEventListener("load",cb);

Ich weiß, dass es auf diese Frage bereits zu viele Antworten gibt, aber keine davon entsprach genau meinen Anforderungen.

Ich brauche eine Funktion, die genau das entgegengesetzte Verhalten von parentNode.insertBefore aufweist – das heißt, sie sollte einen Null-ReferenceNode (der als Antwort nicht akzeptiert wird) akzeptieren und dort einfügen, wo insertBefore eingefügt wird Ende einfügenVor dem er einfügen soll Anfang, da es sonst mit dieser Funktion überhaupt keine Möglichkeit gäbe, am ursprünglichen Speicherort einzufügen; Aus dem gleichen Grund fügt insertBefore am Ende ein.

Da ein Null-ReferenceNode erfordert, dass Sie insertBefore dem übergeordneten Knoten hinzufügen, müssen wir den übergeordneten Knoten kennen. insertBefore ist eine Methode von parentNode und hat daher auf diese Weise Zugriff auf den parentNode des übergeordneten Knotens. Unsere Funktion existiert nicht, daher müssen wir das übergeordnete Element als Parameter übergeben.

Die resultierende Funktion sieht folgendermaßen aus:

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

Dabei sind Knoten1 und Knoten2 DOM-Knoten.

In dieser Lektion lernen wir, wie man Elementknoten (createElement) und Textknoten (createTextNode) erstellt. Wir werden auch Methoden betrachten, die zum Hinzufügen von Knoten zum Baum (appendChild, insertBefore) und zum Entfernen von Knoten aus dem Baum (removeChild) entwickelt wurden.

Das Hinzufügen eines neuen Knotens zu einem Baum erfolgt normalerweise in zwei Schritten:

• createElement() – erstellt ein Element (Knoten) mit angegebenen Namen(Etikett). Die Methode createElement(element) verfügt über einen erforderlichen Parameter (Element) – dies ist eine Zeichenfolge, die den Namen des zu erstellenden Elements (Tags) enthält. Der Name des Elements (Tag) im Parameter muss in Großbuchstaben angegeben werden. Infolge diese Methode gibt das erstellte Element zurück.
• createTextNode() – erstellt einen Textknoten mit dem angegebenen Text. Die Methode createTextNode(text) verfügt über einen erforderlichen Parameter (text) – dies ist eine Zeichenfolge, die den Text des Textknotens enthält. Als Ergebnis gibt diese Methode den erstellten Textknoten zurück.

Die Arbeit mit vorhandenen Knoten mithilfe der Methoden appendChild() und insertBefore() erfolgt ebenfalls in 2 Schritten:

Fügen Sie beispielsweise ein vorhandenes li-Element mit dem Text „Tablet“ am Anfang der Liste hinzu (dadurch wird es von der vorherigen Stelle entfernt):

//Erhalte das UL-Element, das die Liste enthält, anhand seiner ID var elementUL = document.getElementById("list"); //das li-Element abrufen, das den Textknoten „Tablet“ enthält var elementLI = elementUL.childNodes; //ein Element am Anfang der Liste hinzufügen //in diesem Fall wird es von seinem ursprünglichen Speicherort entfernt elementUL.insertBefore(elementLI,elementUL.firstChild);

• Das Dokument enthält zwei Listen. Sie müssen Elemente von der zweiten Liste in die erste verschieben.
• Erstellen Sie eine Liste, ein Textfeld und 2 Schaltflächen. Schreiben Sie Code in JavaScript, der je nach gedrückter Schaltfläche den Text im Textfeld am Anfang oder Ende der Liste hinzufügt.

Das Entfernen eines Knotens aus einem Baum erfolgt in zwei Schritten:

//den Knoten finden, den wir löschen möchten var findElement = document.getElementById("notebook"); //die Methode „removeChild“ auf dem übergeordneten Knoten aufrufen //und ihr den gefundenen Knoten als Parameter übergeben findElement.parentNode.removeChild(findElement);

Entfernen Sie beispielsweise das letzte untergeordnete Element eines Elements mit id="myID" :

//das Element abrufen, das id="myID" hat var myID = document.getElementById("myID"); //den letzten untergeordneten Knoten des Elements myID abrufen var lastNode = myID.lastChild; //Weil Wir wissen nicht, ob der letzte untergeordnete Knoten des Elements ein Element ist, // dann verwenden wir while-Schleife um das letzte untergeordnete Element eines Elements zu finden, myID //während das Element einen Knoten hat und sein Typ nicht 1 ist (d. h. es ist kein Element), machen Sie while(lastNode && lastNode.nodeType!=1) ( //gehe zu vorheriger Knoten lastNode = lastNode. previousSibling; ) //Wenn wir ein Element am Knoten myID gefunden haben, if (lastNode) ( //dann muss es entfernt werden lastNode.parentNode.removeChild(lastNode); )

Löschen Sie beispielsweise alles untergeordnete Knoten für ein Element mit id="myQuestion":

//das Element abrufen, von dem wir alle seine untergeordneten Knoten entfernen möchten var elementQuestion = document.getElementById("myQuestion"); //while gibt es das erste Element while (elementQuestion.firstElement) ( //entferne es elementQuestion.removeChild(element.firstChild); )