JavaScript を使用して HTML 要素を別の要素に置き換えるにはどうすればよいですか?

このチュートリアルでは、JavaScript を使用して HTML 要素を別の要素に置き換える方法を学習します。

使用例によっては、HTML 要素全体を別の要素に置き換える必要があります。たとえば、フォーム検証では非常に重要です。フォームからユーザーの年齢を取得し、ユーザーが間違った年齢を入力したとします。HTML 要素を置き換えることで検証メッセージを表示できます。 HTML 要素を別の HTML 要素に置き換える必要があるもう 1 つのユースケースは、場所などの特定の条件に基づいて Web ページのコンテンツを表示する必要がある動的コンテンツの読み込みです。

ここでは、Web ページ上の HTML 要素を置き換える 3 つの方法を学びます。

replaceWith() メソッドを使用する

最初のメソッドは replaceWith() メソッドを使用します。前の要素を参照として取得し、新しい要素を参照として渡すことにより、replaceWith() メソッドを実行する必要があります。新しい要素を文字列形式で作成できます。

＃＃＃文法＃＃＃

ユーザーは、replaceWith() JavaScript メソッドを使用して、次の構文に従って 1 つの HTML 要素を別の HTML 要素に置き換えることができます。

リーリー

上記の構文では、oldElement は置換可能な要素、newElement は置換される要素です。

＃＃＃例＃＃＃

以下の例では、HTML に「oldElement」という ID を含む div 要素があります。ボタンがクリックされたときに ReplaceElement() 関数を呼び出します。 replaceElement() 関数では、createElement() メソッドを使用して新しい「h2」要素を作成します。さらに、textContent 属性を使用して、新しく作成された HTML 要素にコンテンツを追加します。その後、replaceWith() メソッドを使用して oldElement を newElement に置き換えます。

出力で、ユーザーはボタンをクリックすると、Web ページ上の変更を確認できます。

リーリー

outerHTML 属性を使用する

任意の要素の externalHTML 属性を使用すると、HTML 要素全体を別の HTML 要素に置き換えることができます。 HTML 要素を置き換えるには、新しい要素値を externalHTML 属性に割り当てる必要があります。

＃＃＃文法＃＃＃

ユーザーは、outerHTML 属性を使用して、次の構文に従って 1 つの HTML 要素を別の HTML 要素に置き換えることができます。

リーリー ＃＃＃例＃＃＃

以下の例では、「para」ID とテキスト コンテンツを含む「

」要素を作成します。 replaceElement() 関数では、新しい HTML 要素を文字列形式で作成し、その値を「

」要素の externalHTML 属性に割り当てます。

出力では、ユーザーはボタンをクリックして「

」要素を「

」HTML 要素に置き換える必要があります。

リーリー ＃＃＃例＃＃＃

以下の例では、さまざまなオプションを含む選択メニューを作成します。ここでは、選択メニューの特定のオプションを置き換えます。さらに、2 つの入力フィールドを作成します。 1 つはインデックス番号を取得すること、もう 1 つはユーザーの新しいオプション値を取得することです。

replaceOption() 関数では、ユーザーから新しい入力値を取得します。その後、ユーザーが入力に入力したインデックス値を使用してオプションにアクセスします。次に、オプションの externalHTML 属性を使用して、オプションを新しい値に置き換えます。

出力では、最初の入力フィールドにゼロから始まるインデックス値を入力し、2 番目の入力フィールドに新しいオプション値を入力して、ボタンをクリックしてオプションを置き換えます。

リーリー

replaceChild() メソッドを使用する

replaceChild() メソッドを使用すると、開発者は特定の HTML 要素の子ノードを新しい要素に置き換えることができます。ここでは、特定の要素の最初の子要素を置き換えて、それ自体を新しい要素に置き換えることができます。

＃＃＃文法＃＃＃

ユーザーは、replaceChild() メソッドを使用して、次の構文に従って 1 つの HTML 要素を別の HTML 要素に置き換えることができます。

リーリー

上記の構文では、新しい要素を replaceChild() メソッドの最初のパラメーターとして渡し、古い要素を 2 番目のパラメーターとして渡す必要があります。

＃＃＃例＃＃＃

次の例では、まず createElement() メソッドを使用して「h3」要素を作成します。その後、createTextNode() メソッドを使用してテキスト コンテンツを作成します。その後、appendChild() メソッドを使用して、新しく作成した HTML 要素にテキスト ノードを追加します。

次に、古い要素を参照して replaceChild() メソッドを実行します。さらに、最初のパラメーター (新しく作成された要素) として HTMLele を渡し、2 番目のパラメーター (それ自体を表す古い要素の最初の子要素) として oldEle.childNodes[0] を渡しました。

出力でボタンをクリックし、Web ページ上の変更を確認します。

リーリー

JavaScript を使用して、ある HTML 要素を別の HTML 要素に置き換える 3 つの異なる方法を学びました。最初の方法では、最も簡単な最良の方法の 1 つである replaceWith() メソッドを使用しました。 2 番目の方法では、outerHTML 属性を使用し、3 番目の方法では、一般に子要素を置換するために使用される replaceChild() メソッドを使用します。

以上がJavaScript を使用して HTML 要素を別の要素に置き換えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。