ホームページ > ウェブフロントエンド > jsチュートリアル > DIV_javascript スキルで JavaScript を使用してテキスト要素ノードをラップする

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

WBOY
リリース: 2016-05-16 16:36:52
オリジナル
1336 人が閲覧しました

アプリケーションが特定の 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 を表す値が返された場合、すべてのノードが新しい親に移動されたことがわかります。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート