複数のdom 簡単にcreateElementする方法

Question

<div class="ytp-scrubber-button ytp-swatch-background-color" style="background-color: #f87c7c; height: 13px;">
  <div class="ytp-scrubber-pull-indicator">
  </div>
</div>

のようなDOMを作るには
現在以下のように作成してますが、

  const addDiv = document.createElement('div');
  addDiv.className = 'ytp-scrubber-button ytp-swatch-background-color';
  addDiv.style = 'background-color: #f87c7c; height: 13px;';

  const addDiv2 = document.createElement('div');
  addDiv2.className = 'ytp-scrubber-pull-indicator';

  addDiv.appendChild(addDiv2);

もうちょっと簡単に作る方法はありますでしょうか。

Answer 1

template 要素でどんなに深くても簡単になります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

<template id="template">
  <div class="ytp-scrubber-button ytp-swatch-background-color" style="background-color: #f87c7c; height: 13px;">
    <div class="ytp-scrubber-pull-indicator">
    </div>
  </div>
</template>

  const addDiv = document.getElementById('template').content.cloneNode(true);

Answer 2

オブジェクトのコピーを行うObject.assign()を利用すると属性付きエレメントの作成が簡潔に書けます。

const addDiv = Object.assign(document.createElement('div'),
  {className:'ytp-scrubber-button ytp-swatch-background-color', style:'background-color: #f87c7c; height: 13px;'});
const addDiv2 = Object.assign(document.createElement('div'),
  {className:'ytp-scrubber-pull-indicator'});
addDiv.appendChild(addDiv2);

あとは、関数を別名にしたり、適当に関数にしてしまえばコード量は減りますが、後で見るときや他人が見るときの可読性に問題があるので、無闇に行うのはあまりおすすめしません。

// 例1
creEle = document.createElement
// creEle('div') は document.createElement('div') と同じ

// 例2
creEle = (e, attr) => Object.assign(document.createElement(e), attr)
// creEle('div', {id:'foo'}) は Object.assign(document.createElement('div'), {id:'foo'}) と同じ

Answer 3

jQueryで言う、

const domA = $(`
  <div class="ytp-scrubber-button ytp-swatch-background-color" style="background-color: #f87c7c; height: 13px;">
    <div class="ytp-scrubber-pull-indicator">
    </div>
  </div>
`);

みたいなことをしたいとき、以下のようにDOMParserを使った関数を用意しておくという手がありますよ。

const createElement = domString => new DOMParser().parseFromString(domString, 'text/html').body.firstChild;

const domB = createElement(`
  <div class="ytp-scrubber-button ytp-swatch-background-color" style="background-color: #f87c7c; height: 13px;">
    <div class="ytp-scrubber-pull-indicator">
    </div>
  </div>
`);

console.log(domA[0].outerHTML === domB.outerHTML);
//=> true

参考:
Using the DOM like a Pro
Create an element from raw HTML
https://itnext.io/using-the-dom-like-a-pro-163a6c552eba#1729

Answer 4

jQueryが使えるなら記述は分かりやすくはなります。
入れ子の構造も多少は分かりやすいです。
書き方にもよりますがコード量はあまり変わらないです。

$('<div>', {
    class: 'ytp-scrubber-button ytp-swatch-background-color',
    css: {
        'background-color': '#f87c7c',
        height: 13
    }
}).append(
    $('<div>', {class: "ytp-scrubber-pull-indicator"})
);

jQueryが使用できないのであればkairi003さんのやり方や関数を自作するとかでしょうか。
私もあまりお勧めはしませんが。

参考 createElementメソッドが微妙なので汎用的な関数にする

Comments

[Kimsehwa]

jQueryから脱却中でしたが、こういうのはjQueryが楽ですよね、、

Answer 5

質問の回答としては kairi003 さんの回答を推します。

DOMの動的な生成に関して小話：

JsonML てのもありました。

["div", {
    "className":"ytp-scrubber-button ytp-swatch-background-color" 
  , "style":"background-color: #f87c7c; height: 13px;"
  }
, ["div", {
      "className":"ytp-scrubber-pull-indicator"
    }
  ]
]

DOMに変換するときは、jsonml-html.js で以下のようにしてたはずです。

JsonML.toHTML(string|array jml, function filter) 

登場当時のブラウザでは爆速でDOM構築できたのですが…

フォーマットが JSON ですので、

1. 公式でも JsonMLは HTMLよりもバイト数が増える
2. 要素名を省略できない
3. ダブルクォートも省略できない
4. 上記のように整形して出力するユーティリティがない

と、デメリットが多すぎて、使う人が珍しい。

「JavaScript の Array は 添字指定で代入するのが push() より早い？」なんて言われていた遠い昔のことで、今では知らない人の多い方法論です。