HTML要素を他のHTML要素に置き換える

HTML要素の置換

ページ中にある特定のHTML要素を他のHTML要素に置き換えるときは、replaceChildメソッドかreplaceWithメソッドを使います。

replaceChildメソッドは、指定したHTML要素の子孫要素を他のHTML要素と置き換えます。
もう1つのreplaceWithメソッドは指定したHTML要素自身を、他のHTML要素に置き換えることができます。
置き換えるHTML要素にその要素自身を含めないときはreplaceChildメソッド、含めるときはreplaceWithメソッドという使い分けになります。

今回は以下のHTMLコードを使って、2つのメソッドの使用例を解説していきます。

HTML コード例

<h1>JavaScriptレシピ</h1>
<article id="textbox">
	<p>このエリアにHTML要素を追加する</p>
</article>

以下の例では、上記HTMLにあるarticle要素をid属性から取得して、子孫要素であるp要素を新しく作成したol要素に置き換えます。

JS コード例

// HTML要素を取得
let textbox = document.getElementById("textbox");
let p_element = textbox.querySelector("p");

// 新しくリストを作成
let ol_element = document.createElement('ol');
let li_element1 = document.createElement('li');
let li_element2 = document.createElement('li');
let li_element3 = document.createElement('li');
li_element1.textContent = '新しいテキスト1';
li_element2.textContent = '新しいテキスト2';
li_element3.textContent = '新しいテキスト3';

// 作成したli要素をol要素に追加する
ol_element.appendChild(li_element1);
ol_element.appendChild(li_element2);
ol_element.appendChild(li_element3);

// p要素をol要素に置き換える
textbox.replaceChild( ol_element, p_element);

このコードを実行すると、HTMLは以下のように置き換えられます。

HTML コード例

<article id="textbox">
	<ol>
		<li>新しいテキスト1</li>
		<li>新しいテキスト2</li>
		<li>新しいテキスト3</li>
	</ol>
</article>

replaceChildメソッドは第1パラメータに置き換えた後のHTML要素、第2パラメータに置き換えの対象となる要素を指定することで、2つのHTML要素を置き換えることができます。

続いて、replaceWithメソッドを使って子孫要素だけでなくそのHTML要素自身を置き換えます。
以下の例ではarticle要素を新しく作成したdiv要素に置き換えます。

JS コード例

// id属性からHTML要素を取得
let textbox = document.getElementById("textbox");

// 新しいHTML要素を作成
let div_element = document.createElement('div');
let p_element = document.createElement('p');
p_element.textContent = '新しい要素に置き換え';
div_element.appendChild(p_element);

// 置き換え
textbox.replaceWith(div_element);

このコードを実行すると、HTMLは以下のように置き換えられます。

HTML コード例

<h1>JavaScriptレシピ</h1>
<div>
	<p>新しい要素に置き換え</p>
</div>

replaceWithメソッドは置き換えたいHTML要素のオブジェクトを予め取得しておき、そのオブジェクトからreplaceWithメソッドを呼び出します。
このメソッドを実行すると、呼び出したHTML要素（オブジェクト）をパラメータに渡したHTML要素（オブジェクト）に置き換えます。