【JavaScript】JavaScript側から要素を追加したい

HTMLに直接書き込まず、JavaScript側から要素を追加するという手段もあります。

その際に使用するのが、

document.createElement('追加したい要素')

というものです。

例えば、

document.createElement('div')

とすることで、div要素を作り出すことができます。

以下は使用例となります。

'use strict';

// div定数にdiv要素を作り出すメソッドを定義
const div = document.createElement('div');　★

// div要素にboxClassを追加
div.classList.add('box');

// div要素にcircleClassを追加するイベントを追加
div.addEventListener('click', function(){
  div.classList.toggle('circle');
});

// 最後にdiv要素をbodyの子要素として追加するための記述（これがなければ定数divは表示されない）
document.body.appendChild(div);　★

cleateElement　について

var element = document.createElement(tagName[, options]);

tagName で指定した HTML 要素を生成する、あるいは tagName を認識できない場合に HTMLUnknownElement を生成します。
引用:
Document.createElement - Web API | MDN

また引数については、tagname（divやaなど）を絶対とします。

appendChild　について

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
var p = document.createElement("p");
document.body.appendChild(p);

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。
引用：
Node.appendChild - Web API | MDN

公式ドキュメントにもある通り、親要素をappendChildの前に指定することで、その子要素として引数で指定した要素を配置できます。

また先ほどのcreateElementとセットで使用することがメジャーなよう。

もしくはappendChildの代わりにinsertBeforeを使用する場合もあります。

  var newDiv = document.createElement("div"); 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 　★