Native js implementiert die append()-Methode

Um die append()-Methode in nativem JS zu implementieren, sind spezifische Codebeispiele erforderlich

Beim Schreiben von JavaScript-Code ist es häufig erforderlich, neuen Inhalt zu bestimmten Elementen auf der Webseite hinzuzufügen. Eine häufige Operation besteht darin, den HTML-Inhalt des Elements über das innerHTML-Attribut festzulegen. Die Verwendung des innerHTML-Attributs führt jedoch manchmal zum Verlust von Ereignis-Listenern, Stilen usw. innerhalb des Elements. Um die Funktion des Hinzufügens von Inhalten besser zu implementieren, können wir selbst eine append()-Methode implementieren. Die Methode

append() kann am Ende des angegebenen Elements neuen Inhalt hinzufügen, d. h. die angegebene HTML-Codezeichenfolge an die Innenseite des Elements anhängen. Das Folgende ist ein Codeteil, der natives JavaScript verwendet, um die append()-Methode zu implementieren:

function append(element, html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  
  while (div.children.length > 0) {
    element.appendChild(div.children[0]);
  }
}

Im obigen Code definieren wir eine Funktion namens append(), die zwei Parameter empfängt: element stellt das Zielelement dar, dem Inhalt hinzugefügt werden soll, html Stellt die hinzuzufügende HTML-Codezeichenfolge dar.

Zuerst erstellen wir ein div-Element und weisen dann die hinzuzufügende HTML-Codezeichenfolge dem innerHTML-Attribut des div-Elements zu. Auf diese Weise analysieren wir die HTML-Codezeichenfolge in DOM-Elemente.

Als nächstes verwenden wir eine While-Schleife, um die untergeordneten Knoten des div-Elements zu durchlaufen und die untergeordneten Knoten nacheinander zum Zielelement hinzuzufügen. Während der Iteration verwenden wir die Methode appendChild(), um untergeordnete Knoten am inneren Ende des angegebenen Elements hinzuzufügen. Nachdem die Schleife beendet ist, werden alle untergeordneten Knoten des div-Elements zum Zielelement hinzugefügt.

Wenn wir diese benutzerdefinierte append()-Methode verwenden, müssen wir sie nur aufrufen, indem wir das Zielelement und die hinzuzufügende HTML-Codezeichenfolge übergeben, und wir können die Funktion zum Anhängen von Inhalten an das angegebene Element implementieren, ohne uns um interne Ereignisse kümmern zu müssen Stilverlust.

Das Folgende ist ein Beispiel für die Verwendung der benutzerdefinierten append()-Methode. Angenommen, wir haben ein Element mit der ID „myDiv“ und möchten einen h1-Titel und einen Absatz daran anhängen:

var myDiv = document.getElementById('myDiv');
var html = '<h1>这是一个标题</h1><p>这是一个段落</p>';

append(myDiv, html);

Der obige Code wird angehängt <h1>这是一个标题</h1> <p>这是一个段落</p> Gehen Sie in das Element mit der ID „myDiv“.

Durch die Verwendung von nativem JavaScript zur Implementierung der append()-Methode können Sie Inhalte flexibler zum angegebenen Element hinzufügen und gleichzeitig die Ereignis-Listener und Stile innerhalb des Elements beibehalten. Durch benutzerdefinierte Methoden können wir kontrollierbarere, effizientere und sicherere DOM-Operationen erreichen.

Das obige ist der detaillierte Inhalt vonNative js implementiert die append()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!