【javascript】appendChildを多用するコードをスッキリと

目的

自分用

HTML

<div class="e1">
    <div class="e1-1">
        <div class="e1-1-1"></div>
        <div class="e1-1-2">
            <div class="e1-1-2-1">
        </div>
        <div class="e1-1-3"></div>
    </div>
</div>

javascriptで上記のような要素の生成と追加を繰り返すコードをスッキリさせたかった。
下記のように書くと上記HTMLを出力するようにしたい。

const c = 'className';
const elmement =
    childAppender(el('div',{[c]:'e1'}),
        siblingAppender(el('div',{[c]:'e1-1'}),
            el('div',{[c]:'e1-1-1'}),
            childAppender(el('div',{[c]:'e1-1-2'}),
                el('div',{[c]:'e1-1-2-1'})
            ),
            el('div',{[c]:'e1-1-3'})
        )
    );
console.log(elmement);  //上記HTMLのような構造を出力

第一引数は親要素となる為、慣れないと少しややこしい。

関数

以下の関数を用いる

//要素の生成
const el = (tag, attr) => {
    if (!tag) return null;
    const elm = document.createElement(tag);
    if (!attr) return elm;
    const map = Object.entries(attr);
    for (const [k,v] of map) elm[k] = v;
    return elm;
};
//nodeTypeの確認
const isElementNode = n => n ? n.nodeType===1 : false;
//子孫要素の追加
const childAppender = (...elms) => {
    const idx = elms.findIndex(x => !isElementNode(x));
    switch (idx) {
        case -1:    break;
        case 0:     return null;
        case 1:     return elms[0];
        default:    elms.slice(0, idx); break;
    }
    for (let i=0,len=elms.length-1; i<len; i++) {
        elms[i].appendChild(elms[i + 1]);
    }
    return elms[0];
};
//兄弟要素の追加
const siblingAppender = (parent, ...elms) => {
    if (!isElementNode(parent)) return null;

    const available = elms.filter(isElementNode);
    for (const child of available) parent.appendChild(child);
    return parent;

};

関数の説明

• el( tagName[, {attribute: value,...}] )
  要素を生成し返す。
  引数１：tagName => HTMLのタグ名
  引数２：属性名をKEY、値をVALUEで組んだオブジェクト形式
  　　　　elm.className = 'classname'のようなイコールで指定出来るもののみ
  　　　　elm.classList.add('classname')のような指定方法のものは不可

• childAppender( element1, element2, ... )
  第一引数を親要素として残りの引数を順次、直列的に子孫に追加し、親要素を返す。
  nodeTypeが1でない要素が存在すると以降の要素は追加されない。

• siblingAppender( parentNode, element1, element2, ... )
  第一引数を親要素として残りの引数を順次、兄弟要素として親要素の直下に追加し、親要素を返す。
  nodeTypeが1でない要素は追加されないが、childAppenderと違い最後の引数まで追加される。

感想

少し重い気がする。