Dapatkah javascript membuat div?

Kami sering perlu membangun dan menyesuaikan elemen div secara dinamis di aplikasi web kami. Kami akan menggunakan JavaScript untuk membuat dan menyesuaikan div dalam tutorial ini

Gunakan Metode document.createElement()_ di JavaScript

Menggunakan dokumen. createElement, kita dapat membuat elemen HTML. createElement adalah teknik untuk membuat elemen

Kami memberikan nama tag dari elemen yang ingin kami buat sebagai string untuk menggunakannya

Kode Contoh

const div = document.createElement("div");
div.style.width = "60px";
div.style.height = "20px";
div.style.background = "green";
div.style.color = "white";
div.innerHTML = "Upwork";

document.body.appendChild(div);

Keluaran

Jalankan Kode

document.createElement adalah teknik untuk membuat elemen. menggunakannya, kita bisa membuat div. Kemudian kita dapat menatanya dengan menetapkan nilai untuk properti style properti

Contoh

Membuat

elemen dan menambahkannya ke dokumen

const para = dokumen. createElement("p");
para. innerText = "Ini adalah sebuah paragraf";
dokumen. tubuh. appendChild(para);

Membuat

elemen dan menambahkannya ke elemen

const para = dokumen. createElement("p");
para. innerHTML = "Ini adalah sebuah paragraf. ";
dokumen. getElementById("myDIV"). appendChild(para);

Lebih banyak contoh di bawah ini

Definisi dan Penggunaan

Metode createElement() membuat simpul elemen

Sintaksis

dokumen. buat Elemen(tipe)

Parameter

Nilai Pengembalian

Lebih Banyak Contoh

Buat tombol

const btn = dokumen. createElement("tombol");
btn. innerHTML = "Tombol Halo";
dokumen. tubuh. appendChild(btn);

Dukungan Peramban

document.createElement() adalah fitur DOM Level 1 (1998).

Ini didukung penuh di semua browser

Objek Dokumen menyediakan metode createElement() untuk membuat elemen dan metode appendChild() untuk menambahkannya ke DOM HTML. Berikut adalah langkah-langkah yang terlibat dalam membuat HTML DOM −

Langkah 1 - Untuk memasukkan elemen ke dalam HTML DOM, pertama-tama, kita perlu membuat elemen dan menambahkannya ke HTML DOM. Dokumen. createElement() digunakan untuk membuat elemen HTML. Sintaks untuk membuat elemen ditunjukkan di bawah ini

document.createElement(tagName[, options]);

Di mana,

• tagName adalah nama tag yang akan dibuat. Tag adalah dari

  Tipe

• opsi param adalah objek elemen opsional

Langkah 2 - Setelah membuat tag, kita perlu membuat teks untuk ditetapkan ke tag. Sintaks untuk membuat simpul teks ditunjukkan di bawah ini

Document.createTextNode(“String”);

Langkah 3 - Setelah membuat teks, kita perlu menambahkan teks ke elemen

ketik dan dengan demikian akhirnya menambahkan ke tag div. Sintaks untuk menambahkan elemen ke tag ditunjukkan di bawah ini

appendChild(parameter);

Contoh 1

Pada contoh berikut, awalnya bagian div hanya terdiri dari 2 teks. Tapi nanti, satu teks lagi dibuat dan ditambahkan ke bagian div seperti yang ditunjukkan pada output

   

      
Tutorix
      
Tutorialspoint
   

   

Saat mengeksekusi kode di atas, output berikut dihasilkan

Contoh 2

Berikut ini adalah contoh program cara menambahkan elemen ke DOM HTML. Di sini, metode insertBefore digunakan sebagai pengganti metode append untuk menambahkan elemen ke tag div

Posting ini akan membahas cara membuat elemen <div> secara dinamis di JavaScript dan jQuery

1. Menggunakan JavaScript

Dalam vanilla JavaScript, Anda dapat menggunakan metode createElement() asli untuk membuat elemen HTML <div> dan appendChild() method to append the <div> element to another container.

JS

1

2

3

4

5

6

7

8

dokumen. addEventListener('DOMContentLoaded', function() {

    var div = dokumen.buatElemen('div');

    div. adalah = 'container';

    div. innerHTML = 'Halo. ';

    div. Nama kelas = 'border pad';

    dokumen. tubuh. appendChild(div);

}, salah);

HTML

1

2

3

4

<. doctype html>

lang="en">< lang="en">

CSS

1

2

3

4

5

6

7

. batas {

    perbatasan. 1px padat abu-abu;

}

. pad {

    pengisian. 15 piksel;

}

lang="en">< lang="en">

CSS

1

2

3

4

5

6

7

. batas {

    perbatasan. 1px padat abu-abu;

}

. pad {

    pengisian. 15 piksel;

}

lang="en">< lang="en">

CSS

1

2

3

4

5

6

7

. batas {

    perbatasan. 1px padat abu-abu;

}

. pad {

    pengisian. 15 piksel;

}

lang="en">< lang="en">

CSS

1

2

3

4

5

6

7

. batas {

    perbatasan. 1px padat abu-abu;

}

. pad {

    pengisian. 15 piksel;

}