DOM
Elemente manipulieren

Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP React SVG
Suche…


Elemente klonen

Ein Element kann durch Aufrufen der cloneNode Methode geklont werden. Wenn der erste Parameter zu übergeben cloneNode ist true , auch die Kinder der ursprünglichen geklont werden. 

var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);

Element hinzufügen

In diesem Beispiel erstellen wir ein neues Listenelement mit dem Text "Neuer Text" und wählen die erste ungeordnete Liste und das erste Listenelement aus. 

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Wenn Sie ein Element einfügen, führen wir es unter dem übergeordneten Element und unmittelbar vor einem bestimmten untergeordneten Element dieses übergeordneten Elements aus. 

parentElement.insertBefore(newElement, nextSibling);

Das neue Element wird unter parentElement und unmittelbar vor nextSibling .

Wenn ein Element als letztes parentElement Element von parentElement , kann das zweite Argument null . 

parentElement.insertBefore(newElement, null);

Das neue Element wird unter parentElement als letztes parentElement Element eingefügt.

Stattdessen kann appendChild() verwendet werden, um das appendChild() einfach an die appendChild() des übergeordneten Knotens anzuhängen. 

parentElement.appendChild(newElement);

Das neue Element wird unter parentElement als letztes parentElement Element eingefügt.

Element ersetzen

In diesem Beispiel erstellen wir ein neues Listenelement mit dem Text "Neuer Text" und wählen die erste ungeordnete Liste und das erste Listenelement aus. 

let newElement = document.createElement("li");
newElement.innerHTML = "new text";

let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");

Um ein Element zu ersetzen, verwenden wir replaceChild : 

parentElement.replaceChild(newElement, nextSibling);

nextSibling wird aus dem DOM entfernt. An seiner Stelle steht jetzt newElement .

Element entfernen

Ein Element kann durch Aufrufen von remove() entfernt werden. Alternativ kann removeChild() für das übergeordnete removeChild() . removeChild() hat eine bessere Browserunterstützung als remove() . 

element.remove();

element und alle zugehörigen untergeordneten Elemente werden aus dem DOM entfernt. 

parentElement.removeChild(element);

element und alle zugehörigen untergeordneten Elemente werden aus dem DOM entfernt.

In jedem Fall kann dieser Knoten zu einem späteren Zeitpunkt in das DOM eingefügt werden, solange noch Verweise auf diesen Knoten vorhanden sind.

Methoden anhängen und vorbereiten

JavaScript verfügt jetzt über die in jQuery vorhandenen Methoden Append und Prepend

Der Hauptvorteil von append und prepend ist im Gegensatz zu appendChild und insertBefore . Es kann eine beliebige Anzahl von Argumenten verwendet werden, entweder ein HTML-Element oder einfacher Text (der in insertBefore konvertiert wird).

Zum Anhängen sagen wir 1 Div, 1 Textknoten und 1 Bereich 

document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))

Dadurch wird die Seite in die folgende Struktur geändert 

<body>
      .....(other elements)
      <div></div>
      "Hello World"
      <span></span>
</body>

Dasselbe im Körper vorzuschlagen

Benutzen 

document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))

Dadurch wird die Seite in die folgende Struktur geändert 

<body>
      <div></div>
      "Hello World"
      <span></span>
      .....(other elements)
</body>

Beachten Sie, dass der Browser unterstützt

Chrome 54+
Firefox 49+
Opera 39+

Lesen Sie mehr bei MDN

Anhängen

Voranstellen



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow