JavaScript

この記事では「JavaScript」について、基本の意味と使い方を初心者向けにやさしく説明します。

JavaScript appendChild method.

appendChild

　JavaScriptでプログラミングを行う際、動的に Webサイトに要素を追加したい場合があると思います。そのような時に便利なのが appendChildメソッドです。要素の集合体をノードといいます。

　appendChildメソッドを使うと、特定の親ノードの子ノードの最後にノードを追加することができます。なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わります。

Syntax（構文）


const child = element.appendChild(child);

　戻り値は追加した子要素です。

　要素を指定し、その要素の子要素として、HTMLタグを追加することができます。

　追加される場所は、親要素の末尾です。つまり指定した要素の閉じタグの直前です。

追加前


<ul id="test">
	<li>テキスト１</li>
	<li>テキスト２</li>
</ul>

　上記のソースの ID「test」を指定して要素を追加した場合は、下記のように指定した要素の閉じタグの直前に追加されます。

追加後


<ul id="test">
	<li>テキスト１</li>
	<li>テキスト２</li>
	<li>テキスト３</li>
</ul>

　同じような目的のメソッドとして、insertBeforeや、標準JavaScriptのElement.append()、jQueryのappend()などがあります。

appendと appendChildの違い

　appendChildの使い方の前に、よく混同されるappendと appendChildの違いについて確認していきましょう。

　appendChildと appendはよく似ていますが、標準JavaScriptにもElement.append()があります。jQueryにも同じ名前のappend()があり、それぞれ別のAPIです。

　appendChild()はNodeを1つ追加し、追加したNodeを返します。一方、標準のappend()は文字列や複数のNodeを追加できますが、戻り値はありません。

　jQueryとは JavaScriptの超有名なライブラリです。JavaScriptのメソッドをより使いやすくまとめており、より簡単にコードを書くことができます。

　jQueryを使う場合はjQueryのappend()を使えますが、ライブラリを追加しない場合でも標準のElement.append()を使えます。必要な機能とプロジェクトの方針に合わせて選びましょう。

　サンプルコードでそれぞれを比較してみましょう。

JavaScript


const abe = document.createElement("li");
abe.setAttribute("id", "abe_prime_minister");
abe.textContent   = "安倍晋三首相";
 
var prime_minister_list = document.getElementById("prime_minister_list");
 
prime_minister_list.appendChild(abe);

jQuery


$("#prime_minister_list").append('安倍晋三首相');

　同じ結果でも、記述は jQueryはたった１行で記述することができます。

　標準JavaScriptでは、Nodeを1つ扱うならappendChild()、文字列や複数のNodeも追加したいならappend()というように使い分けられます。jQueryを使っている場合はjQueryのappend()を選択肢にできます。

Sample

親要素

子要素１

子要素２

子要素３

HTML + JavaScript


<button onclick="addChildCreate()">子要素を追加（新規）</button><br>
<button onclick="addChildCopy()">子要素を追加（コピー）</button><br>
<button onclick="addChildExist()">子要素を追加（既存要素）</button><br>
<div id="parent">親要素
	<div id="child1">子要素１</div>
	<div id="child2">子要素２</div>
	<div id="child3">子要素３</div>
</div>
<script>
	const parent = document.getElementById("parent");
	let idx = 4;
	
	// 子要素を追加（新規）
	function addChildCreate() {
		const child = document.createElement("div");
		addChild(child);
	}
	
	// 子要素を追加（コピー）
	function addChildCopy() {
		// 先頭の子要素をコピーする
		let child = document.getElementById("parent").firstElementChild.cloneNode(true);
		addChild(child);
	}
	
	// 子要素を追加（既存の要素）
	function addChildExist() {
		// 先頭の子要素を取得する
		let child = document.getElementById("parent").firstElementChild;
		addChild(child);
	}
	
	// 子要素を追加（共通）
	function addChild(child) {
		child.id = "child" + idx;
		child.innerText = replaceHalfToFull("子要素" + idx);
		idx++;
		child = parent.appendChild(child);
	}
	
	// 半角を全角に変換
	function replaceHalfToFull(str) {
		return str.replace(/[!-~]/g, function(s) {
			return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
		});
	}
</script>

　追加する要素は３パターンです。また、実際に要素を追加する関数は addChildとして共通化してあります。

addChildCreate: createElementメソッドで新規作成した要素を使用。
addChildCopy: cloneNodeメソッドで既存の要素をコピーした要素を使用。
addChildExist: 単に既存の要素を指定しただけで使用。

　新規とコピーは新たに要素が追加されるのに対し、既存要素は既存のノードが新しいノードで置き換わることが確認できます。