DIV_javascript スキルで JavaScript を使用してテキスト要素ノードをラップする

アプリケーションが特定の JavaScript ライブラリに依存している場合、誤って言語ではなくライブラリ自体で問題を解決しようとすることになります。テキスト (HTML 要素も含まれる場合がある) を DIV 要素でラップしようとしたときと同様です。次の HTML があるとします:

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

現時点で、次のように変換したい場合:

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

最も単純な強引な方法は、親要素の .innerHTML プロパティを通じて更新を実行できることですが、問題は、innerHTML を使用すると HTML 要素が再作成されるため、バインドされたイベント リスナーがすべて無効になることです。なんと大きなグラスでしょう！したがって、現時点では、これを実現するには JavaScript を使用するしかありません。定規は短く、インチは長くなっています。以下は実装コードです:

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

childNodes は動的ノードのコレクションであり、ノードを移動するとそのインデックス値に影響するため、ここでは For ループを使用できません。 while ループを使用して親要素の firstChild をチェックし続けます。 false を表す値が返された場合、すべてのノードが新しい親に移動されたことがわかります。