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

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

replaceChildメソッド

サンプル

replaceChildメソッドのサンプルです。
「置換え1」ボタンを押すと「テスト:」横のスペースの部分がボタンに置き換わります。
「置換え2」ボタンを押すと「テスト:」横のスペースの部分がテキストボックスに置き換わります。

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

コード

上記サンプルのコードです。
4-7行目は、ボタンを作成しています。
9行目は置き換える場所を指定しています。
11行目は置き換える対象を指定しています。
14目は、replaceChildメソッドで置き換えを行っています。
18-20行目は、テキストボックスを作成しています。
27行目は、replaceChildメソッドで置き換えを行っています。

<script>
function btn1_click(){
	// 1.ボタンの作成
	var s1 = document.createElement('input');
	s1.setAttribute("type","button");
	s1.setAttribute("id","test1");
	s1.setAttribute("value","sample");
	// 2.置き換える場所を取得
	var p1 = document.getElementById('p1');
	// 3.置き換える対象を取得
	var t1 = document.getElementById('test1');

	// 4.置換 replaceChild(新しいノード,古いノード)
	p1.replaceChild(s1, t1);
}
function btn2_click(){
	// 1.テキストボックスの作成
	var s1 = document.createElement('input');
	s1.setAttribute("type","text");
	s1.setAttribute("id","test1");
	// 2.置き換える場所を取得
	var p1 = document.getElementById('p1');
	// 3.置き換える対象を取得
	var t1 = document.getElementById('test1');

	// 4.置換 replaceChild(新しいノード,古いノード)
	p1.replaceChild(s1, t1);
}
</script>
<body >
<p id="p1">テスト:<span id="test1">ボタンを押して下さい</span></p>
<input type="button" value="置換1" onclick='btn1_click()'>
<input type="button" value="置換2" onclick='btn2_click()'>
</body>

 

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)
JavaScript クラス名を指定して要素ノードを取得するサンプル(getElementsByClassName)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)



△上に戻る