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のすべて起こっ外です...

あなたはこれを求めている

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

見ていinsertAdjacentHTMLを

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

positionは、挿入する要素に隣接する位置です。

「beforebegin」 要素自体の前

'afterbegin' 要素の内側、最初の子の前

'beforeend' 要素の内部、最後の子の後

'afterend' 要素自体の後

古い学校のJavaScriptでは、これを行うことができます。

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

あなたのコメントに応じて：

[...]要素のではなく、新しい要素の属性とイベントのソースを宣言することに興味がinnerHTMLありました。

ただし、新しいHTMLをDOMに挿入する必要があります。これinnerHTMLが、昔ながらのJavaScriptの例で使用されている理由です。要素は、新しいHTMLで付加されます。実際には内の既存のHTMLには触れていません。innerHTMLBODYBODY

これを明確にするために、上記の例を書き直します。

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

JavaScriptフレームワークを使用すると、このコードの冗長性が大幅に低下し、読みやすさが向上します。たとえば、jQueryでは次のことが可能です。

$('body').prepend('<p id="foo">Some HTML</p>');

私の知る限り、これはかなり新しいものであり、限られたものですが、この手法の唯一の潜在的な問題は、いくつかのテーブル要素を動的に作成できないことです。

「テンプレート」要素を非表示のDIVに追加し、次にcloneNode（true）を使用してクローンを作成し、必要に応じてそれを追加することで、フォームを使用してテンプレートを作成します。重複を防ぐために、必要に応じてIDを確実に再割り当てする必要があることに注意してください。

他の人が言ったように、便利なjQuery prepend機能はエミュレートできます：

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

innerHTMLを "いじる" ことは避けた方がよいと言う人もいますが、これを知っていれば、多くの使用例で信頼できます。

場合<div>、<span>または<noembed>ノードが文字を含む、子テキストノードを（有する&）、（ <）、または（>）は、innerHTMLプロパティは、としてこれらの文字を返し&amp、&ltそして&gtそれぞれ。Node.textContentこれらのテキストノードのコンテンツの正しいコピーを取得するために使用します。

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

または：

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTMLおそらく良い代替手段です：https : //developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

既存のページのタグ内にHTMLコードを挿入する場合は、Jneratorを使用します。このツールは、この目標のために特別に作成されました。

次のコードを書く代わりに

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

あなたはより理解しやすい構造を書くことができます

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;