HTML-Inhalt mit JavaScript an das vorhandene HTML-Element anhängen

1. Nachteil der Verwendung von InnerHTML zum Hinzufügen eines neuen HTML-Knotens
2. HTML-Inhalte hinzufügen, ohne die DOM-Elemente zu ersetzen
3. Verwenden von appendChild() zum Anhängen von HTML-Inhalten in JavaScript
4. Verwenden von insertAdjacentHTML() zum Hinzufügen von HTML-Knoten

Das Hinzufügen von HTML-Inhalt zu einem div oder einem anderen HTML-Element mit Javascript ist einfach. Wir können die Eigenschaft HTMLElement.innerHTML des Elements mit dem neuen HTML-Inhalt setzen. Während des Vorgangs werden jedoch alle hinzugefügten dynamischen Attribute gelöscht.

Nachteil der Verwendung von InnerHTML zum Hinzufügen eines neuen HTML-Knotens

• Das HTMLElement.innerHTML funktioniert, indem es den HTML-Inhalt innerhalb des Elements löscht und ihn dann mit dem neuen darin enthaltenen HTML-Stück wieder hinzufügt. Im Wesentlichen ersetzt es den HTML-Inhalt, anstatt nur einen neuen hinzuzufügen.
• Wenn wir dem DOM ein neues HTML-Element mit der Eigenschaft innerHTML hinzufügen, entfernt es auch alle untergeordneten Knoten und ersetzt sie dann durch die neuen Knoten, die durch das Parsen des neuen HTML-Inhalts erstellt wurden (der HTML-String, der innerHTML-Eigenschaft) und rendern den gesamten HTML-Code neu.
• Es ist nicht viel bekannt, dass bei der Verwendung von innerHTML in einem Projekt, das einer Cybersicherheitsprüfung unterzogen wird, der Code abgelehnt werden kann. Es wird empfohlen, innerHTML nicht direkt zu verwenden, da dies ein potenzielles Sicherheitsrisiko darstellen kann (weitere Details siehe MDN-Link).

HTML-Inhalte hinzufügen, ohne die DOM-Elemente zu ersetzen

Um unserem bestehenden DOM ein Stück HTML-Code hinzuzufügen, können wir die folgenden eingebauten Funktionen von Javascript verwenden, ohne befürchten zu müssen, dass bereits angehängte dynamische Inhalte verloren gehen.

• appendChild()
• insertAdjacentHTML()

Verwenden von appendChild() zum Anhängen von HTML-Inhalten in JavaScript

appendChild() dient dem gleichen Zweck wie innerHTML. Wir können beide Methoden verwenden, um einem Knoten HTML-Inhalt hinzuzufügen. Der Unterschied zwischen den beiden Ansätzen besteht darin, dass appendChild() eine Funktion ist, während innerHTML eine Eigenschaft ist. appendChild() fügt dem bestehenden DOM-Element einen Knoten hinzu, anstatt den Inhalt von DOM zu ersetzen, wie es durch die innerHTML-Eigenschaft getan wird.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="adress">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;
addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.appendChild(i);
}

Wir haben ein Formular erstellt, um den name und die address des Benutzers mit dem obigen Code zu erfassen. Die Adresse hat normalerweise mehr als eine Zeile. Daher haben wir eine Schaltfläche erstellt, die beim Anklicken neue Eingabefelder hinzufügt, um diese zusätzlichen Adresszeilen zu erfassen. Im Folgenden wird der Prozess zum Erstellen eines neuen Eingabefelds befolgt.

1. Wir rufen die Funktion addAddressLine beim Click-Ereignis des Buttons Add Address Line auf.
2. In der Funktion erzeugen wir HTML input dynamisch mit der Funktion document.createElement('input'). Es gibt das erstellte input-Element zurück, das in der Variable i gespeichert ist.
3. Als nächstes setzen wir mit der Methode setAttribute() die Attribute type und placeholder auf die erstellte Variable input.
4. Wir haben das Element input bereit, um es der bestehenden div-Struktur hinzuzufügen. Daher fragen wir nach der address div mit docuemnt.getElementById(), was die div-Struktur als Ganzes zurückgibt, und verwenden dann die Funktion appendChild(i) von JavaScript.
5. Die Funktion appendChild(i) fügt das dynamisch erzeugte Element input der Variablen i hinzu und stellt es an das Ende der address div. Wir verwenden den lineCount, um den Platzhalterwert jedes Mal zu erhöhen, wenn wir ein neues Eingabefeld hinzufügen.

Notiz

• Wir können auch die neuere Methode append() verwenden, um das erstellte Element an das DOM anzuhängen. Die Javascript-Methode append erlaubt es uns, DOMString (einfache String-Texte) als Argument zu verwenden und gibt keinen Wert zurück. Beachten Sie, dass der Internet Explorer-Browser die neuere Methode append() nicht unterstützt.
• Alle modernen Webbrowser, auch der Internet Explorer, unterstützen die ältere Funktion appendChild().

Verwenden von insertAdjacentHTML() zum Hinzufügen von HTML-Knoten

Die Funktionen appendChild() und sogar append() sind in der Lage, dem gegebenen HTML-Knoten neue Elemente hinzuzufügen. Beide Methoden fügen das Element nach dem letzten Kind ein. Es ist möglicherweise nicht für alle Szenarien nützlich. Insbesondere, wenn wir den HTML-Knoten an einer bestimmten Position in der HTML-Struktur hinzufügen möchten. Für solche Fälle kann die Funktion insertAdjacentHTML() verwendet werden. Es braucht ein paar Parameter, die Position und den Text an dieser Position.

• Position: insertAdjacentHTML unterstützt vier Werte im Positionsparameter.

  • beforebegin: Um den HTML-Knoten vor dem Anfang des Elements einzufügen.
  • afterbegin: Wie der Name schon sagt, fügt diese Option das Element direkt nach dem öffnenden Tag des ausgewählten Knotens ein und platziert es vor dem ersten Kind.
  • beforeend: Dieser ähnelt dem appendChild(). Wie der Name schon sagt, platziert die Position beforeend das Element direkt hinter dem letzten Kind.
  • afterend: Bezieht sich auf die Position nach dem Schließen des Ziel-HTML-Node-Tags.

• String: Als zweiten Parameter können wir den HTML-Code im String-Format einfügen. Zum Beispiel: <div> Hello World!</div>.

Auf einen Blick sieht die Darstellung wie folgt aus.

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Schauen wir uns das gleiche Beispiel an, das wir für appendChild() mit der JavaScript-Funktion insertAdjacentHTML() besprochen haben.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="address">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;

addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.insertAdjacentElement('beforeend', i);
}

In diesem Code haben wir die Option beforeend im Parameter verwendet, um das dynamisch erstellte Eingabeelement am Ende des Div address anzuhängen. Sie können versuchen, mit den anderen Attributen wie den Parametern afterend, beforebegin und afterbegin herumzuspielen.