Verwenden Sie JavaScript, um Textelementknoten mit DIV_javascript-Fähigkeiten zu umschließen

Wenn Ihre Anwendung auf eine bestimmte JavaScript-Bibliothek angewiesen ist, versuchen Sie versehentlich, Probleme mit bestimmten Bibliotheken selbst zu lösen, und nicht Probleme mit der Sprache. Zum Beispiel, wenn ich versuche, Text (der auch HTML-Elemente enthalten kann) mit einem DIV-Element zu umbrechen. Angenommen, Sie haben den folgenden HTML-Code:

This is some text and <a href="">a link</a>

Zu diesem Zeitpunkt, wenn Sie es wie folgt umwandeln möchten:

<div>This is some text and <a href="">a link</a><div>

Die einfachste Brute-Force-Methode besteht darin, dass Sie Aktualisierungen über die .innerHTML-Eigenschaft des übergeordneten Elements durchführen können. Das Problem besteht jedoch darin, dass alle gebundenen Ereignis-Listener ungültig sind, da durch die Verwendung von innerHTML ein HTML-Element neu erstellt wird. Was für ein großes Glas! Daher können wir dies derzeit nur mit JavaScript erreichen – das Lineal ist kurz und der Zoll lang. Das Folgende ist der Implementierungscode:

var newWrapper = document.createElement('div'); 
while(existingParent.firstChild) { 
// 移动DOM元素,不会创建新元素 
newWrapper.appendChild(existingParent.firstChild); 
}

For-Schleife kann hier nicht verwendet werden, da childNodes eine Sammlung dynamischer Knoten ist und das Verschieben eines Knotens seinen Indexwert beeinflusst. Wir verwenden eine While-Schleife, um weiterhin das erste Kind des übergeordneten Elements zu überprüfen. Wenn ein Wert zurückgegeben wird, der „false“ darstellt, wissen Sie, dass alle Knoten zum neuen übergeordneten Element verschoben wurden!