Dalam metode ini, pertama-tama kita memilih div dengan menggunakan salah satu pemilih i. e. getElementById, getElementByTag, querySelector, dll. Kami kemudian menambahkan data ke atribut innerHTML dari div. Metode ini memiliki satu kelemahan. itu menghapus semua pendengar acara yang ada pada div yang dipilih. Itu juga akan menghancurkan semua node yang ada di dalamnya dan menggantinya dengan yang baru. Semua referensi ke elemen akan hilang

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

Gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _1 untuk Menambahkan Data ke Div di JavaScript

Seperti metode sebelumnya, pertama kita pilih div dengan menggunakan salah satu pemilih. Tetapi alih-alih innerHTML_, kami menggunakan

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

Gunakan var targetDiv = document.getElementById('ID'); var content = document.createTextNode("data that you want to add"); targetDiv.appendChild(content); _5 untuk Menambahkan Data ke Div di JavaScript

Seperti metode kedua, metode ini merupakan alternatif yang lebih baik dari metode pertama.

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

Gunakan var targetDiv = document.getElementById('ID'); targetDiv.insertAdjacentHTML('afterend', 'data that you want to add'); 0 jQuery untuk Menambahkan Data ke Div

Fungsi append mengambil input dari konten yang perlu ditambahkan dan dapat dipanggil langsung pada tag menggunakan sintaks jQuery. Metode ini juga memiliki semua kekurangan dari metode innerHTML

Mari kita coba memahami dua metode di atas untuk menambahkan HTML ke div dalam JavaScript dengan contoh dan penjelasan yang tepat

Bagaimana cara menambahkan kode HTML menggunakan innerHTML?

Properti innerHTML digunakan untuk mengubah konten di dalam div atau tag HTML apa pun. Ini benar-benar menggantikan konten div yang ada dengan konten baru tetapi untuk menggunakan properti ini, div harus diberi id unik dan id harus selalu unik

Kode

<. DOCTYPE html>
< html lang="en">
< kepala >
    < judul > Lampirkan </title>
< /kepala >
< tubuh >
    < h1 gaya="text-align: center;" > Proses untuk menambahkan kode HTML menggunakan JavaScript < /<h1>
   
    < div id="check"></div>
    < skrip >
        dokumen. getElementById("periksa"). innerHTML = ' < em style="font-size:30px;" > Ini adalah sebuah paragraf < /em>'
    < /skrip >
< /tubuh >
< /html >

Dalam kode ini, kami membuat dokumen HTML sederhana yang memiliki tag heading dan tag div kosong dengan tanda id unik. Kemudian kami menggunakan properti JavaScript innerHTML untuk menambahkan kode HTML di dalam div kosong

Keluaran

The output clearly shows that we append HTML tag with some content and styling inside the empty div tag using innerHTML through JavaScript.

Bagaimana cara menambahkan dengan menggunakan insertAdjacentHTML?

Dalam JavaScript, insertAdjacentHTML adalah metode lain yang digunakan untuk menambahkan kode HTML ke dalam div melalui JavaScript. Metode ini membutuhkan 2 argumen, Argumen pertama menentukan posisi konten dalam div dan argumen kedua adalah kode HTML sebenarnya yang ingin Anda tambahkan dalam div

Metode ini menggunakan empat posisi untuk menambahkan konten HTML dalam div

• sebelum dimulai
• sebelumnya
• afterbegin
• akhir

Mari kita telusuri semua posisi ini satu per satu

sebelum dimulai
Pada kode berikut, atribut ini akan menempatkan kode HTML sebelum check id div

Kode

<. DOCTYPE html>
< html lang="en">
< kepala >
    < judul >Lampirkan< /judul>
< /kepala >
< tubuh >
    < h1 gaya="perataan teks. center;" >Proses untuk menambahkan kode HTML code menggunakan JavaScript< /<h1>
   
    < div id="centang">
        < p >Paragraf ini ditulis untuk menunjukkan proses penambahan kode HTML code in a div using JavaScript.</p >
    < /div >

    skrip >
        dokumen. getElementById ("periksa") . insertAdjacentHTML ("beforebegin" , ")
    < /skrip >
< /tubuh >
< /html >

In this code, we create a simple HTML document with

tag and a

having unique id check. Inside this div a paragraph is written using

. Now we append HTML

tag using insertAdjacentHTML method and use beforebegin position to append this HTML code on a specific position.KeluaranOutputnya dengan jelas menunjukkan bahwa metode insertAdjacentHTML menambahkan kode HTML sebelum div yang ditargetkan karena kami menggunakan atribut beforebegin untuk memposisikan kode HTML yang ditambahkansebelumnyaIn the following code, this attribute will place the HTML code inside the check id div but after the tag.Kode< html lang="en"< kepala >    < judul >Lampirkan< /judul< /kepala >< tubuh >    < h1 gaya="perataan teks. center;" >Proses untuk menambahkan kode HTML code menggunakan JavaScript< /       < div id="centang"        < p >Paragraf ini ditulis untuk menunjukkan proses penambahan kode HTML code in a div using JavaScript.    < /div >    skrip >        dokumen. getElementById ("periksa") . insertAdjacentHTML ("sebelum" , ")    < /skrip >< /tubuh >< /html >In this code, we create a simple HTML document with tag and a having unique id check. Inside this div a paragraph is written using . Now we append HTML tag using insertAdjacentHTML method and use beforeend position to append this HTML code on a specific position.KeluaranThe output clearly shows that insertAdjacentHTML method appends HTML code after the tag inside the targeted div because we use its beforeend attribute to position our appended HTML code.afterbeginIn the following code, this attribute will place the HTML code inside the check id div but just before the tag.Kode< html lang="en"< kepala >    < judul >Lampirkan< /judul< /kepala >< tubuh >    < h1 gaya="perataan teks. center;" >Proses untuk menambahkan kode HTML code menggunakan JavaScript< /       < div id="centang"        < p >Paragraf ini ditulis untuk menunjukkan proses penambahan kode HTML code in a div using JavaScript.    < /div >    skrip >        dokumen. getElementById ("periksa") . insertAdjacentHTML ("afterbegin" , ")    < /skrip >< /tubuh >< /html >In this code, we create a simple HTML document with tag and a having unique id check. Inside this div a paragraph is written using . Now we append HTML tag using insertAdjacentHTML method and use afterbegin position to append this HTML code on a specific position. (adsbygoogle = window.adsbygoogle || []).push({}); KeluaranThe output clearly shows that insertAdjacentHTML method appends HTML code inside the targeted div but just before the tag because we use its afterbegin attribute to position our appended HTML code.akhirPada kode berikut, atribut ini akan menempatkan kode HTML setelah check id divKode< html lang="en"< kepala >    < judul >Lampirkan< /judul< /kepala >< tubuh >    < h1 gaya="perataan teks. center;" >Proses untuk menambahkan kode HTML code menggunakan JavaScript< /       < div id="centang"        < p >Paragraf ini ditulis untuk menunjukkan proses penambahan kode HTML code in a div using JavaScript.    < /div >    skrip >        dokumen. getElementById ("periksa") . insertAdjacentHTML ("setelah akhir" , ")    < /skrip >< /tubuh >< /html >In this code, we create a simple HTML document with tag and a having a unique id check. Inside this div a paragraph is written using . Now we append HTML tag using insertAdjacentHTML method and use afterend position to append this HTML code on a specific position.KeluaranOutputnya dengan jelas menunjukkan bahwa metode insertAdjacentHTML menambahkan kode HTML setelah div yang ditargetkan karena kami menggunakan atribut afterend untuk memposisikan kode HTML kami yang ditambahkanKesimpulan

Dalam JavaScript, kita dapat menambahkan kode HTML ke div menggunakan innerHTML dan insertAdjacentHTML. InnerHTML menambahkan kode HTML dengan mengganti konten saat ini di div dengan konten baru sedangkan insertAdjacentHTML menambahkan kode HTML dengan memposisikan, menggunakan atribut beforebegin, afterbegin, beforeend dan afterend. Pada artikel ini, kita telah mempelajari tentang proses menambahkan kode HTML ke div menggunakan JavaScript

Bagaimana cara membuat div dan menambahkan dalam JavaScript?

Menggunakan atribut innerHTML. Untuk menambahkan menggunakan atribut innerHTML, pertama-tama pilih elemen (div) tempat Anda ingin menambahkan kode. Kemudian, tambahkan kode yang diapit sebagai string menggunakan operator += pada innerHTML .

Bagaimana cara membuat div di JavaScript?

appendChild(div); untuk membuat div, memberi gaya, dan menambahkannya sebagai anak dari elemen body. createElement mengembalikan objek elemen. Kemudian kita dapat mengatur properti dari properti style untuk menerapkan berbagai gaya.

Bagaimana cara menambahkan konten ke div di JavaScript?

Menambahkan teks ke DIV menggunakan Metode appendChild() dalam JavaScript (Metode 2) Anda juga dapat menggunakan metode appendChild() dalam JavaScript untuk .

Bagaimana cara menambahkan div secara dinamis dalam JavaScript?

// membuat elemen div. biarkan divElement = dokumen. buatElemen('div')

// buat simpul teks. biarkan divElementText = dokumen. createTextNode('Elemen div yang dibuat secara dinamis')

// tambahkan simpul teks ke div. divElement. appendChild(divElementText)

// tambahkan elemen div ke dokumen. dokumen. tubuh. appendChild(divElement)