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
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
Tutorial ini akan menunjukkan kepada Anda bagaimana menggunakan ketiga cara untuk menampilkan variabel JavaScript di halaman HTML. Mari kita mulai dengan menggunakan metode <body> Hello </body> _0
Tampilkan variabel JavaScript menggunakan metode <body> Hello </body> 0
Metode <body> Hello </body> 0 memungkinkan Anda mengganti seluruh konten tag HTML <body> Hello </body> _6 dengan ekspresi HTML dan JavaScript yang ingin ditampilkan di dalam tag <body> Hello </body> 6. Misalkan Anda memiliki elemen HTML berikut
<body> <h1>Hello World</h1> <p>Greetings</p> </body> _
Saat Anda menjalankan metode <body> Hello </body> _8 pada bagian HTML di atas, konten <body> Hello </body> 6 akan diganti sebagai berikut
<body> Hello </body> _
Mengetahui hal ini, Anda dapat menampilkan nilai variabel JavaScript apa pun hanya dengan meneruskan nama variabel sebagai parameter ke metode <body> Hello </body> 0
let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag
Metode <body> Hello </body> 0 umumnya digunakan hanya untuk tujuan pengujian karena akan menghapus semua elemen HTML yang ada di dalam tag <body> Hello </body> 6 Anda. Sebagian besar, Anda ingin menampilkan variabel JavaScript di samping elemen HTML Anda. Untuk melakukan itu, Anda perlu menggunakan metode selanjutnya
Tampilkan variabel JavaScript menggunakan properti innerHTML
Setiap elemen HTML memiliki properti <body> Hello </body> _1 yang menyimpan konten elemen tersebut. Browser memungkinkan Anda untuk memanipulasi properti <body> Hello </body> _1 dengan menggunakan JavaScript dengan hanya menetapkan properti ke nilai yang berbeda
Misalnya, bayangkan Anda memiliki tag HTML <body> Hello </body> 6 berikut
<body> <h1 id="header">Hello World</h1> <p id="greeting">Greetings</p> </body>
Anda dapat mengganti konten tag let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag 6 dengan terlebih dahulu mengambil elemen menggunakan pengenalnya. Karena elemen let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag 6 memiliki atribut let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag 8 dengan nilai let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag 9, Anda dapat menggunakan metode <body> <h1 id="header">Hello World</h1> <p id="greeting">Greetings</p> </body> 0 untuk mengambilnya dan mengubah properti <body> Hello </body> 1 miliknya
Inilah cara Anda melakukannya
document.getElementById("greeting").innerHTML = "Bonjour";
Konten tag let name = "Nathan"; document.write(name); // Writes Nathan to the <body> tag let num = 999; document.write(num); // Writes 999 to the <body> tag _6 akan diubah sebagai berikut
<body> <h1 id="header">Hello World</h1> <p id="greeting">Bonjour</p> </body>
Mengetahui hal ini, Anda cukup membungkus ruang di mana Anda ingin variabel JavaScript Anda ditampilkan dengan elemen <body> <h1 id="header">Hello World</h1> <p id="greeting">Greetings</p> </body> 3 sebagai berikut
<body> <h1>Hello, my name is <span id="name"></span></h1> <script> let name = "Nathan"; document.getElementById("name").innerHTML = name; </script> </body>
Kode di atas akan menampilkan HTML berikut
<h1>Hello, my name is <span id="name">Nathan</span></h1>
Dan begitulah cara Anda menampilkan nilai variabel JavaScript menggunakan properti <body> Hello </body> 1
Tampilkan variabel JavaScript menggunakan jendela. waspada() metode
Metode <body> Hello </body> 2 memungkinkan Anda meluncurkan kotak dialog di bagian depan halaman HTML Anda. Misalnya, saat Anda mencoba menjalankan halaman HTML berikut
<body> <h1>Hello World</h1> <script> window.alert("Greetings"); </script> </body>
Kotak dialog berikut akan muncul di browser Anda
Contoh kotak peringatan JavaScript
Implementasi untuk setiap browser akan sedikit berbeda, tetapi semuanya berfungsi sama. Mengetahui hal ini, Anda dapat dengan mudah menggunakan kotak dialog untuk menampilkan nilai variabel JavaScript. Cukup berikan nama variabel ke metode <body> <h1 id="header">Hello World</h1> <p id="greeting">Greetings</p> </body> 6 sebagai berikut
<body> <h1>Hello World</h1> <script> let name = "Nathan JS" window.alert(name); </script> </body>
Kode di atas akan meluncurkan kotak dialog yang menampilkan nilai variabel <body> <h1 id="header">Hello World</h1> <p id="greeting">Greetings</p> </body> 7
Kesimpulan
Menampilkan variabel JavaScript di halaman HTML adalah tugas umum untuk pengembang web. Peramban modern memungkinkan Anda untuk memanipulasi konten HTML dengan memanggil metode JavaScript API yang terbuka
Cara paling umum untuk menampilkan nilai variabel JavaScript adalah dengan memanipulasi nilai properti <body> Hello </body> 1, tetapi saat menguji variabel Anda, Anda juga dapat menggunakan metode <body> Hello </body> 0 atau <body> Hello </body> 2. Anda bebas menggunakan metode yang paling cocok untuk Anda
Bagaimana cara mendapatkan nilai elemen HTML dalam JavaScript?
Bagaimana Anda menampilkan elemen dalam HTML?
Bagaimana cara mengembalikan elemen HTML dalam JavaScript?
- '; list += generateListItem('Item 1'); list += generateListItem('Item 2'); list += generateListItem('Item 3'); list += '
Bagaimana cara mendapatkan semua elemen HTML dalam JavaScript?
elements with class="intro" .