Memasukkan elemen HTML dengan JavaScript

Alih-alih mencari solusi untuk setiap jenis atribut dan peristiwa secara membosankan saat menggunakan sintaks berikut:

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

Apakah ada cara di mana saya bisa mendeklarasikan seluruh elemen HTML sebagai string? Suka:

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

Alih-alih langsung mengotak-atiknya innerHTML, mungkin lebih baik membuat fragmen lalu memasukkannya:

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]);

Manfaat:

1. Anda dapat menggunakan metode DOM asli untuk penyisipan seperti insertBefore, appendChild dll.
2. Anda memiliki akses ke simpul DOM yang sebenarnya sebelum mereka dimasukkan; Anda dapat mengakses objek childNodes fragmen.
3. Penggunaan fragmen dokumen sangat cepat; lebih cepat daripada membuat elemen di luar DOM dan dalam situasi tertentu lebih cepat daripada innerHTML.

Meskipun innerHTMLdigunakan dalam fungsi, semuanya terjadi di luar DOM jadi jauh lebih cepat dari yang Anda kira ...

Kamu mau ini

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

Silakan lihat di sisipanHTML yang berdekatan

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 adalah posisi relatif terhadap elemen yang Anda sisipkan berdekatan:

'beforebegin' Sebelum elemen itu sendiri

'afterbegin' Tepat di dalam elemen, sebelum anak pertamanya

'beforeend' Tepat di dalam elemen, setelah anak terakhirnya

'afterend' Setelah elemen itu sendiri

Di JavaScript jadul, Anda bisa melakukan ini:

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

Menanggapi komentar Anda:

[...] Saya tertarik untuk mendeklarasikan sumber atribut dan peristiwa elemen baru, bukan innerHTMLdari suatu elemen.

Anda perlu memasukkan HTML baru ke dalam DOM; itulah mengapa innerHTMLdigunakan dalam contoh JavaScript jadul. The innerHTMLdari BODYelemen prepended dengan HTML baru. Kami tidak benar-benar menyentuh HTML yang ada di dalam BODY.

Saya akan menulis ulang contoh yang disebutkan di atas untuk memperjelas ini:

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'

Menggunakan kerangka kerja JavaScript akan membuat kode ini tidak terlalu bertele-tele dan meningkatkan keterbacaan. Misalnya, jQuery memungkinkan Anda melakukan hal berikut:

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

Sepengetahuan saya, yang, sejujurnya, cukup baru dan terbatas, satu-satunya masalah potensial dengan teknik ini adalah kenyataan bahwa Anda dicegah untuk membuat beberapa elemen tabel secara dinamis.

Saya menggunakan formulir untuk membuat template dengan menambahkan elemen "template" ke DIV tersembunyi dan kemudian menggunakan cloneNode (true) untuk membuat klon dan menambahkannya sesuai kebutuhan. Ingatlah bahwa Anda perlu memastikan Anda menetapkan kembali id ​​seperti yang diperlukan untuk mencegah duplikasi.

Seperti orang lain mengatakan jQuery nyaman tambahkan fungsi dapat ditiru:

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

Sementara beberapa orang mengatakan lebih baik untuk tidak "mengacaukan" dengan innerHTML , ini dapat diandalkan dalam banyak kasus penggunaan, jika Anda mengetahui ini:

Jika a <div>,, <span>atau <noembed>node memiliki node teks anak yang menyertakan karakter ( &), ( <), atau ( >), innerHTML mengembalikan karakter ini sebagai &amp, &ltdan &gtmasing - masing. Gunakan Node.textContentuntuk mendapatkan salinan yang benar dari konten node teks ini.

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

Atau:

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

insertAdjacentHTMLmungkin merupakan alternatif yang baik: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAd BerdekatanHTML

Jika Anda ingin memasukkan kode HTML di dalam tag halaman yang ada, gunakan Jnerator . Alat ini dibuat khusus untuk tujuan ini.

Daripada menulis kode berikutnya

    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;

Anda bisa menulis struktur yang lebih bisa dimengerti

    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;