javaScriptでhtml要素の追加

はじめに

javaScriptでhtml要素を追加したいと思います。
方法は大きく2つあります。

1. 親になる要素の「innerHTML」にタグの文字列を追加する
2. 親になる要素の「appendChild()」でDOMオブジェクトを追加する

※jQueryを使用している場合でも、内部では最終的にいずれかになります。
(「html()」はinnerHTML、「append()」はappendChild)

innerHTML

1つずつ「innerHTML」にタグの文字列を追加する

function addElement() {
  const ele = document.getElementById('objParent');
  for(let i = 0; i < 1000; ++i){
    ele.innerHTML += '<div class="none">' + i + '</div>';
  }
}

文字列変数にタグ文字列をためて「innerHTML」に追加する

function addElement() {
  const ele = document.getElementById('objParent');
  let str = '';
  for(let i = 0; i < 1000; ++i){
    str += '<div class="none">' + i + '</div>';
  }
  ele.innerHTML += str;
}

appendChild

1つずつ「appendChild()」でDOMオブジェクトを追加する

function addElement() {
  const ele = document.getElementById('objParent');
  for(let i = 0; i < 10000; ++i){
    const eleDiv = document.createElement('div');
    eleDiv.classList.add('none');
    eleDiv.innerHTML = i;
    ele.appendChild(eleDiv);
  }
}

「DocumentFragment」に対して「appendChild()」で追加して、親要素に「DocumentFragment」を追加する

function addElement() {
  const ele = document.getElementById('objParent');
  const df = document.createDocumentFragment();
  for(let i = 0; i < 10000; ++i){
    const eleDiv = document.createElement('div');
    eleDiv.classList.add('none');
    eleDiv.innerHTML = i;
    df.appendChild(eleDiv);
  }
  ele.appendChild(df);
}

おまけ（要素の削除）

「innerHTML」を削除する

function delElement() {
  const ele = document.getElementById('objParent');
  ele.innerHTML = '';
}

「remove()」で削除する

function delElement() {
  const ele = document.getElementById('objParent').children;
  for(let i = 0; i < ele.length; i++) {
    ele[i].remove()
  }
}