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や jQueryの appendなどがあります。

appendと appendChildの違い

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

　appendChildと append、よく似ていますよね。しかし appendは、jQueryのメソッドです。

　最初に結論を述べてしまうと、２つの違いとは JavaScriptなのか？ jQueryなのか？たったこれだけです。

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

　JavaScriptの appendChildについても同様で、jQueryを導入すれば appendで要素の追加がより簡単に行なうことができます。

JavaScript


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

jQuery


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

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

　jQueryを使っているなら append、使っていないなら appendChildと使い分けるようにしましょう。

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として共通化してあります。

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