[解決済み] JavaScriptでHTML要素を挿入する

質問

以下の構文を使用する場合、属性やイベントの種類ごとに回避策を探すのは面倒です。

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

HTML要素全体を文字列として宣言するような方法はないでしょうか？ のように。

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

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

を直接いじるのではなく innerHTML を直接いじるよりも、フラグメントを作ってそれを挿入したほうがいいかもしれません。

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

メリット

1. insertBefore、appendChild などの挿入用のネイティブ DOM メソッドを使用できる。
2. 挿入される前の実際の DOM ノードにアクセスすることができます。フラグメントの childNodes オブジェクトにアクセスすることができます。
3. ドキュメントフラグメントの使用は非常に速く、DOM の外側に要素を作成するよりも速く、特定の状況下では innerHTML よりも速いです。

とはいえ innerHTML が関数内で使われていますが、これはすべて DOM の外側で起こっているので、思ったよりもずっと速いのです。