javaScript｜生のJavaScriptで要素の作成・追加をする

jQueryとかを使わないで、要素を作成したり追加したりする方法をメモ

createElement()で新しく要素を作成できます。

var p = document.createElement('p');
p.textContent = 'こんにちは！';

これで <p>こんにちは！</p> の要素が作られます。

appendChild()で最後の位置に子要素として追加できます。

※addElementには、追加したい要素が入っているとしています。

element.appendChild(addElement);

※addElementには、追加したい要素が入っているとしています。

element.insertBefore(addElement, element.firstChild);

※addElementには、追加したい要素が入っているとしています。

親要素の子要素として指定要素の前に追加しています。

element.parentNode.insertBefore(addElement, element); 

※addElementには、追加したい要素が入っているとしています。

親要素の子要素として指定要素の後に追加しています。

element.parentNode.insertBefore(addElement, element.nextSibling); 

スポンサーリンク