[解決済み] innerHTMLよりcreateElementの方が優れている？

質問

実際には、innerHTML よりも createElement を使用することの利点は何でしょうか。私は innerHTML を使用することがパフォーマンスとコードの可読性/保守性の面でより効率的であると確信していますが、私のチームメイトはコーディング アプローチとして createElement を使用することに同意しているので、質問しているのです。私は、createElementがより効率的になる方法を理解したいだけです。

どのように解決するのですか？

を使用することには、いくつかの利点があります。 createElement を修正する代わりに innerHTML (を修正するのではなく（すでにあるものを捨てて置き換えるのではなく）、Pekkaがすでに述べたように、安全性のほかに

要素を追加するときに、DOM 要素への既存の参照を保持します。

への追加（またはその他の変更）時に innerHTML に追加（または変更）すると、その要素内のすべての DOM ノードが再分析され、再作成される必要があります。ノードへの参照を保存していた場合、それらはもう表示されないので、本質的に役に立たなくなります。

任意の DOM 要素にアタッチされたイベント ハンドラを保持します。

これは本当に最後のものの特殊なケースに過ぎません（よくあることですが）。設定 innerHTML を設定しても、それが作成する新しい要素に自動的にイベントハンドラを再付与することはありません。したがって、自分でそれらを追跡して手動で追加する必要があります。イベント デリゲーションは、場合によってはこの問題を解消することができます。

場合によってはよりシンプルで高速になる可能性がある

多くの追加を行う場合、リセットし続けることは絶対に避けなければなりません。 innerHTML をリセットし続けることは絶対に避けなければなりません。単純な変更であれば高速ですが、再解析と要素作成を繰り返すと遅くなるからです。これを回避する方法は、HTMLを文字列で構築し、その中に innerHTML を終了時に一度だけ設定することです。状況によっては、文字列操作の方が、単に要素を作成して追記するよりも遅くなる可能性があります。

さらに、文字列操作のコードはより複雑になるかもしれません（特に安全であることを望む場合）。

以下は、私が時々使う、より便利にするための関数です。 createElement .

function isArray(a) {
    return Object.prototype.toString.call(a) === "[object Array]";
}

function make(desc) {
    if (!isArray(desc)) {
        return make.call(this, Array.prototype.slice.call(arguments));
    }

    var name = desc[0];
    var attributes = desc[1];

    var el = document.createElement(name);

    var start = 1;
    if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {
        for (var attr in attributes) {
            el[attr] = attributes[attr];
        }
        start = 2;
    }

    for (var i = start; i < desc.length; i++) {
        if (isArray(desc[i])) {
            el.appendChild(make(desc[i]));
        }
        else {
            el.appendChild(document.createTextNode(desc[i]));
        }
    }

    return el;
}

このように呼び出すと

make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);

とすると、これと同等のHTMLが得られます。

<p>Here is a <a href="http://www.google.com/">link</a>.</p>