JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)

JavaScriptの要素ノードを追加/削除するサンプルです。
createElementメソッドとremoveChildメソッドを使用します。
要素とは、<input type="button" value="ボタン">とある場合、inputが要素です。typeとvalueは属性で、"button"と"ボタン"は属性値です。

目次

ノードの追加と削除

createElementメソッドとremoveChildメソッドのサンプルです。
「追加」ボタンを押すとcreateElementメソッドで要素Pを作成して文字を追加します。
「削除」ボタンを押すとremoveChildメソッドで要素Pを削除します。

コード

上記サンプルのコードです。
5行目は、21行目のid=div1に子ノードがないか確認しています。
6行目は、createElementメソッドで要素Pを作成しています。
7行目は、createTextNodeでテキストノードを作成しています。引数は文字として表示されます。
8行目は、appendChildメソッドで要素Pにテキストノードを追加しています。
9行目は、appendChildメソッドで21行目のid=div1に要素Pを追加しています。
15行目は、21行目のid=div1に子ノードがあるか確認しています。
16行目は、removeChildメソッドで子ノードを削除しています。

<script>
function btn1_click(){
	var d1 = document.getElementById('div1');
	// 要素の追加
	if (!d1.hasChildNodes()){
		var p1 = document.createElement('p');
		var c1 = document.createTextNode("テスト");
		p1.appendChild(c1);
		d1.appendChild(p1);
	}
}
function btn2_click(){
	// 要素の削除
	var d1 = document.getElementById('div1');
	if (d1.hasChildNodes()){
		d1.removeChild(d1.firstChild);
	}
}
</script>
<body >
<div id="div1"></div>
<input type="button" value="追加" onclick='btn1_click()'>
<input type="button" value="削除" onclick='btn2_click()'>
</body>

テキストボックスの追加と削除

createElementメソッドを使用してテキストボックスを追加するサンプルです。
「追加」ボタンを押すとcreateElementメソッドでテキストボックスを作成します。
「削除」ボタンを押すとremoveChildメソッドでテキストボックスを削除します。

コード

上記サンプルのコードです。
6行目は、createElementメソッドでinput要素を作成しています。
7-10行目はsetAttributeメソッドでinput要素の属性を追加しています。

<script>
function btn3_click(){
	var d2 = document.getElementById('div2');
	// 要素の追加
	if (!d2.hasChildNodes()){
		var i1 = document.createElement('input');
		i1.setAttribute("type","text"); 
		i1.setAttribute("maxlength","5"); 
		i1.setAttribute("size","10"); 
		i1.setAttribute("value","初期表示");
		d2.appendChild(i1);
	}
}
function btn4_click(){
	var d2 = document.getElementById('div2');
	if (d2.hasChildNodes()){
		d2.removeChild(d2.firstChild);
	}
}
</script>

<body >
<div id="div2"></div>
<input type="button" value="追加" onclick='btn3_click()'>
<input type="button" value="削除" onclick='btn4_click()'>
</body>

リンクの追加と削除

createElementメソッドを使用してa要素のリンクを追加するサンプルです。
「追加」ボタンを押すとcreateElementメソッドでa要素のリンクを作成します。
「削除」ボタンを押すとremoveChildメソッドでa要素のリンクを削除します。

コード

上記サンプルのコードです。
6行目は、createElementメソッドでa要素を作成しています。
7-9行目は、a要素の属性を追加しています。

<script>
function btn5_click(){
	var d3 = document.getElementById('div3');
	// 要素の追加
	if (!d3.hasChildNodes()){
		var a1 = document.createElement("a");
		a1.href = "https://itsakura.com/";
		a1.target = "_blank";
		a1.innerText = "itsakuraへ遷移します";
		d3.appendChild(a1);
	}
}
function btn6_click(){
	var d3 = document.getElementById('div3');
	if (d3.hasChildNodes()){
		d3.removeChild(d3.firstChild);
	}
}
</script>
</head>
<body >
<div id="div3"></div>
<input type="button" value="追加" onclick='btn5_click()'>
<input type="button" value="削除" onclick='btn6_click()'>
</body>

複数ノードを削除する場合

複数ノードを削除する場合のコードです。for文を回して削除します。

function btn6_click(){
	var d3 = document.getElementById('div3');
	if (d3.hasChildNodes()){
		// 子ノードを全削除
		for (var i=d3.childNodes.length-1; i>=0; i--) {
			d3.removeChild(d3.childNodes[i]);
		}
	}
}

createElementメソッド

removeChildメソッド

createTextNodeメソッド

appendChildメソッド

setAttributeメソッド

関連の記事

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




△上に戻る