レイアウトやイベントを中断せずに DOM 要素を置き換える方法は?

JavaScript を使用したシームレスな DOM 要素の置換

はじめに:

Web ページの構造を変更するには、時折、次の要素を削除したり追加したりする必要があります。ドキュメント オブジェクト モデル (DOM) 内の要素。特定のシナリオの 1 つは、既存の要素を代替要素と交換する必要がある場合に発生します。

クエリ:

Q: を置き換えるにはどうすればよいですか?レイアウトを中断したりイベントを中断したりせずに、DOM 要素を直接使用できますか?

回答:

replaceChild() の使用:

replaceChild () メソッドは、DOM 内の要素を置換するためのクリーンで正確なソリューションを提供します。 2 つの引数を取ります:

1. replacementNode: 挿入される新しい要素。
2. oldNode: 削除される既存の要素。

構文は次のとおりです。

oldNode.parentNode.replaceChild(replacementNode, oldNode);

その使用法を示す実際の例を次に示します。

<code class="javascript">var myAnchor = document.getElementById("myAnchor");
var mySpan = document.createElement("span");
mySpan.innerHTML = "replaced anchor!";
myAnchor.parentNode.replaceChild(mySpan, myAnchor);</code>

この例では、アンカー要素にID「myAnchor」は、「アンカーを置き換えました!」というテキストを含むspan要素に置き換えられます。 DOM 構造やイベント ハンドラーには影響を与えません。

以上がレイアウトやイベントを中断せずに DOM 要素を置き換える方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。