JavaScript ノードを置換するサンプル(replaceChild)

JavaScriptのノードを置換するサンプルです。
replaceChildメソッドを使用します。

目次

要素を置き換えるサンプル

「置換え1」ボタンを押すとreplaceChildメソッドでボタンに置き換えます。
「置換え2」ボタンを押すとreplaceChildメソッドでテキストボックスに置き換えます。

テスト:ボタンを押して下さい

コード

上記サンプルのコードです。

<p id="p1">テスト:
	<span id="a1">ボタンを押して下さい</span>
</p>
<input type="button" value="置換1" onclick="clickBtn1()">
<input type="button" value="置換2" onclick="clickBtn2()">

<script>
function clickBtn1(){
	const new1 = document.createElement("input");
	new1.setAttribute("type","button");
	new1.setAttribute("value","sample");
	new1.setAttribute("id","a1");

	const old1 = document.getElementById("a1");

	const p1 = document.getElementById("p1");

	p1.replaceChild(new1, old1);
}
function clickBtn2(){
	const new2 = document.createElement("input");
	new2.setAttribute("type","text");
	new2.setAttribute("id","a1");

	const old2 = document.getElementById("a1");

	const p1 = document.getElementById("p1");

	p1.replaceChild(new2, old2);
}
</script>

4行目のボタンをクリックすると8行目の関数を実行します。
9-12行目は、ボタンを作成しています。
14行目は置き換える場所を取得しています。2行目を置き換えます。
16行目は置き換える対象を指定しています。親ノードになります。1行目です。
18目は、replaceChildメソッドで置き換えを行っています。
21-23行目は、テキストボックスを作成しています。
29行目は、replaceChildメソッドで置き換えを行っています。

 

replaceChildメソッド

親ノード.replaceChild(新しいノード, 古い子ノード);

関連の記事

JavaScript ID属性で取得/設定する(getElementById)
JavaScript タグ単位で取得/設定する(getElementsByTagName)
JavaScript クラス単位で取得/設定する(getElementsByClassName)
JavaScript 属性値を取得/設定する(getAttribute/setAttribute)
JavaScript 要素を追加/削除する(createElement/removeChild)
JavaScript 全ての子の要素を取得/設定する(children)

△上に戻る