【javascript】appendChild()とinsertBefore()を使った要素の追加について

javascriptで要素を追加する時にappendChild()とかinsertBefore()とかを使っても上手く追加できなかったので調べた時の備忘録

調べるに至った経緯

脱jQuery目指そうと要素追加のコードをjQueryからjavascriptに以下のように変更したら

var text = '<p>テキスト</p>';
$('.container').append(text);
// ↓ 変更
document.getElementsByClassName('container').appendChild(text);

以下のようなエラー吐いた

Uncaught TypeError: document.getElementsByClassName(…).appendChild is not a function

あ、getElementsByClassName()はclassを取得するから[0]って最初に取得した要素を指定しないと駄目なのか？って思い書き換えたら別のエラーが出た

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

で、「Node」ってなんだ？ってなったのがきっかけ

Node(ノード)とは

ちょっと調べたら、HTMLのタグとか属性とかテキストなどの構成要素は全部ノードって言うみたい
pタグは要素ノードでその中のテキストはテキストノードって分類されるみたい

それで、.appendChild(text)で追加するときのtext変数の中身が追加できる形、ノードになっていないからノードとして加えるようにしないといけないみたい

詳しくは参考記事見た方が早い

javascriptで「appendChild()」と「insertBefore()」での要素を追加する方法

とりあえず、javascriptで要素を追加するためのコード
ノードとして追加するため、要素一から用意する必要性がある

<div class="container"></div>
<script>
var newElement = document.createElement("p"); // p要素作成：<p></p>
var newContent = document.createTextNode("テキスト"); // テキストノードを作成："テキスト"
newElement.appendChild(newContent); // p要素にテキストノードを追加：<p>テキスト</p>
var parentElement = document.getElementsByClassName('container')[0]; // class="container"を持つ最初の要素取得

parentElement.appendChild(newElement);// appendChild()を使って追加
parentElement.insertBefore(newElement, null);// insertBefore()を使って追加
</script>

// 結果
<div class="container"><p>テキスト</p></div>

appendChild()もinsertBefore()も追加するところまで書き方が一緒だった
さらに、appendChild()もinsertBefore()を一緒に書いてるけど出力される<p>テキスト</p>は一つだけだった

どうにも、appendChild()で追加した<p>テキスト</p>をinsertBefore()が上書きしているっぽい

ちなみにjQueryで
$('.container').append('<p>テキスト</p>')
を実行すると
<p>テキスト</p>が実行する度に追加されるからjavascriptでやる時は注意した方が良いのかも