Buat elemen dengan javascript teks

Buat Elemen HTML div dalam JavaScript dengan memanggil metode createElement() pada objek dokumen

Metode ini mengambil argumen yang akan menjadi Elemen HTML

Dalam hal ini…div

const box = document.createElement("div");
box.id = "box";
document.body.appendChild(box);

Tetapkan ke kotak yang disebut konstanta

Setel properti id kotak ke 'kotak'

Tambahkan ke hierarki DOM dengan memanggil appendChild() pada dokumen. objek tubuh dengan kotak argumen

Mari tambahkan elemen anak ke elemen kotak

Untuk melakukannya, buat elemen HTML tombol di JavaScript dengan memanggil metode createElement() pada objek dokumen

Metode ini mengambil argumen…

tapi kali ini, tombol

Tetapkan ke tombol panggilan konstan

Tambahkan teks ke elemen tombol dengan menyetel nilai string ke properti innerHTML-nya

Tambahkan elemen tombol ke hierarki DOM dengan memanggil metode appendChild() pada dokumen. objek tubuh dengan tombol sebagai argumen

Untuk menambahkan atribut ID ke tombol, setel nilai string ke properti id dari tombol

const button = document.createElement('button');
button.innerText = 'Button';
button.id = 'button-1';
box.appendChild(button);

Terakhir, tambahkan elemen tombol ke elemen kotak

Panggil metode appendChild() pada kotak dengan meneruskan tombol sebagai argumen

Cobalah. ⛹️

Lihat Pena Buat Elemen HTML dalam JavaScript oleh Raja Tamil (@rajarajan) di CodePen

Obyek. Menetapkan()

Pelajari cara membuat Elemen HTML yang sama menggunakan Objek. menetapkan()

Panggil metode assign() pada objek di dalam appendChild()

Menetapkan metode membutuhkan dua argumen

• Elemen HTML DOM yang ingin kita buat
• Objek JavaScript tempat kita dapat menggunakan salah satu properti DOM seperti id, innerHTML, dll

document.body.appendChild(
  Object.assign(
    document.createElement('div'),
    { id : 'box'}
  )
)

Ini lebih mudah daripada pendekatan sebelumnya jika kita memiliki banyak properti

Untuk menambahkan elemen anak ke elemen kotak, yang harus kita lakukan hanyalah merantai appendChild() lainnya dengan elemen tombol

Yang lebih mudah dan lebih mudah dibaca daripada pendekatan pertama

document.body
  .appendChild(
  Object.assign(
    document.createElement('div'),
    { id:'box'}
  )
).appendChild(
  Object.assign(
    document.createElement('button'),
    { innerHTML : 'button' ,
      id:'button-1'
    }
  )
)

Cobalah. ⛹️

Lihat Pen Create HTML Element in JavaScript – 2 [EMBED] oleh Raja Tamil (@rajarajan) di CodePen

ES 6 Backtick

Pelajari cara menambahkan Elemen HTML yang sama ke hierarki DOM menggunakan back-tick ES6 yang sejauh ini merupakan cara termudah

Karena, Anda benar-benar dapat menulis kode HTML di dalam JavaScript yang sangat mudah dibaca dan dipelihara

Buat kotak yang disebut konstan dan tambahkan sepasang back-ticks. Tulis kode HTML Anda persis seperti yang Anda lakukan di dalam halaman HTML

Pada artikel ini, kita akan belajar cara membuat elemen dari string menggunakan JavaScript. Ini dapat digunakan dalam situasi di mana elemen yang dihasilkan secara dinamis diperlukan oleh pengguna. Hal ini dapat dicapai dengan menggunakan dua pendekatan seperti yang diberikan di bawah ini

• Menggunakan metode createElement()
• Menggunakan metode jQuery parseHTML()

Pendekatan 1. Menggunakan metode createElement()

Metode createElement() digunakan untuk membuat elemen di dalam DOM. Itu menerima dua parameter, sebuah tagName yang merupakan string yang menentukan jenis elemen yang akan dibuat, dan objek opsi opsional yang dapat digunakan untuk mengubah cara elemen dibuat. Elemen apa pun yang diperlukan dapat diteruskan sebagai string dalam fungsi ini dan ini akan mengembalikan elemen yang ditentukan. Pendekatan ini hanya dapat digunakan untuk membuat satu elemen dari satu string

Contoh. Dalam contoh ini, kami membuat elemen tajuk dengan menentukan string sebagai "h2"

HTML

<h1 style="color:green">

    GeeksforGeeks

</h1>

h11

<h13>

    h16

    h18

    style0

    style2

style_3

    style5

    style7

style8style9

    =1

style8=3

style_3

    =6

    =8

=9"color:green"0

    "color:green"2

=9"color:green"4

style_3

    "color:green"7

    "color:green"_9

    >1

</h13>

Keluaran

Pendekatan 2. Menggunakan metode jQuery parseHTML()

Metode jQuery parseHTML() digunakan untuk mengurai string HTML sehingga dapat digunakan untuk membuat elemen sesuai dengan HTML yang diberikan. Pendekatan ini dapat digunakan untuk membuat banyak elemen dari string

Contoh. Dalam contoh ini, string ditentukan dengan beberapa elemen yang diuraikan ke HTML dan ditambahkan ke badan dokumen

Bagaimana cara membuat elemen dengan string dalam JavaScript?

Bagaimana cara membuat elemen dalam JavaScript?

Bagaimana cara menambahkan teks ke div di JavaScript?