Utilisez JavaScript pour envelopper les nœuds d'éléments de texte avec des compétences DIV_javascript

Lorsque votre application s'appuie sur une bibliothèque JavaScript spécifique, vous essayez par inadvertance de résoudre des problèmes avec certaines bibliothèques elles-mêmes, plutôt que des problèmes avec le langage. Comme lorsque j'essaie d'envelopper du texte (qui peut également contenir des éléments HTML) avec un élément DIV. Supposons que vous ayez le HTML suivant :

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

À ce stade, si vous souhaitez le convertir comme suit :

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

La méthode de force brute la plus simple consiste à effectuer des mises à jour via la propriété .innerHTML sur l'élément parent, mais le problème est que tous les écouteurs d'événements liés seront invalides car l'utilisation de innerHTML recréera un élément HTML. Quel grand verre ! Donc, pour le moment, nous ne pouvons utiliser que JavaScript pour y parvenir : la règle est courte et le pouce est long. Voici le code d'implémentation :

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

La boucle For ne peut pas être utilisée ici, car childNodes est une collection de nœuds dynamiques, et le déplacement d'un nœud affectera sa valeur d'index. Nous utilisons une boucle while pour continuer à vérifier le firstChild de l'élément parent. S'il renvoie une valeur représentant false, alors vous savez que tous les nœuds ont été déplacés vers le nouveau parent !