Dalam tutorial ini, kita akan mengenal berbagai metode untuk membuat elemen dari string di JavaScript. Membuat elemen dari string bisa sangat berguna jika kita harus membuat elemen secara dinamis yang membuat situs web menjadi interaktif. Contohnya seperti di aplikasi daftar tugas yang kami tambahkan, hapus, dan edit item tugas
Metode createElement()
Kami membuat item JavaScript menggunakan metode createElement(). Untuk membuat elemen tertentu, kita meneruskan nama item sebagai string ke dalam metode createElement()
Fungsi createElement(tagName) memiliki parameter sebagai nama tag yang akan dibuat menggunakan metode ini. Di sini tagName adalah nama parameter dan akan berbentuk string. Perhatikan bahwa hanya satu elemen yang akan dibuat dari satu string
Sintaksis
document.createElement("tagName")Di tempat tagName kami memberikan nama tag seperti p (paragraf), h1 (heading 1), img (gambar). createElement akan membuat tagName menjadi huruf kecil sehingga Anda tidak perlu khawatir tentang kasus ini
Langkah
LANGKAH 1 - Buat string dengan nilai elemen seperti h3 dan p, dll
LANGKAH 2 - Berikan string ke metode createElement() sebagai parameter. Tetapkan nilai ke variabel. Ini akan membuat elemen yang diperlukan
LANGKAH 3 - Setelah membuat elemen, kami menetapkan teks yang diinginkan ke kedua elemen menggunakan properti innerText
LANGKAH 4 - Setelah semua, tambahkan kita menggunakan metode append() atau appendChild() untuk menambahkan elemen yang dibuat ke halaman web sehingga akan terlihat oleh pengguna
Mari buat heading dan paragraf dari string
let string1="h3" let string2="p" let element1=document.createElement(string1) let element2=document.createElement(string2) _Jadi, Anda harus tahu tentang cara kami membuat elemen tetapi membuat elemen tidak akan membantu untuk menampilkan elemen tersebut kepada pengguna karena itu bukan bagian dari DOM, tetapi kami harus menjadikannya bagian dari DOM dengan menambahkannya ke halaman web
Jadi, kami menggunakan beberapa metode seperti append(), dan appendChild()
Contoh
Tambahkan elemen yang dibuat menggunakan metode append()
Dalam contoh di bawah ini kami membuat dua elemen h3 dan p menggunakan metode document createElement(). Kemudian tetapkan beberapa teks ke elemen ini dan tambahkan elemen ke DOM menggunakan metode append(). Terakhir, tampilkan elemen menggunakan properti innerHTML
Creating elements from string in JavaScriptnhi
Contoh
Tambahkan elemen yang dibuat menggunakan metode appendChild()
Pada contoh di bawah ini, kami membuat dua elemen h3 dan p menggunakan metode document createElement(). Kemudian tetapkan beberapa teks ke elemen ini dan tambahkan elemen ke DOM menggunakan metode appendChild(). Terakhir, tampilkan elemen menggunakan properti innerHTML
Creating elements from string in JavaScript
Sekarang Anda mungkin berpikir bahwa output program di atas adalah sama lalu apa yang membuat kedua program tersebut berbeda?
Yah, ya keduanya digunakan untuk menambahkan node ke dokumen HTML tetapi dalam kasus metode append() mengembalikan node yang ditambahkan tetapi metode appendChildI() tidak mengembalikan apa pun
Menggunakan metode append() kita dapat menambahkan beberapa elemen sekaligus tetapi dalam metode appendChild() kita hanya dapat menambahkan satu elemen sekaligus
Menyukai
document.body.append(element1, element2) _Ini akan melakukan pekerjaan yang sama seperti
document.body.append(element1) document.body.append(element2)Menggunakan metode append() DOMString dan DOMNodes keduanya dapat ditambahkan ke elemen induk tetapi dalam kasus metode appendChild() hanya DOMNodes yang dapat ditambahkan ke elemen induk
Kemarin, saya menulis tentang Reef, alternatif ringan saya untuk Vue dan React. Selama beberapa hari ke depan, saya ingin melihat bagaimana berbagai bagiannya bekerja di bawah tenda
Hari ini, kita akan melihat cara mengambil string HTML dan mengubahnya menjadi markup yang sebenarnya
Mengapa Anda membutuhkan ini
Jika Anda ingin menyuntikkan string ke dalam DOM, Anda dapat melakukannya cukup dengan innerHTML
app.innerHTML = '<h1>Hello, world!</h1>'; _
Tapi Reef tidak hanya mendorong markup ke dalam sebuah elemen. Itu membandingkan markup yang ada dalam suatu elemen dengan tampilannya, dan hanya memperbarui hal-hal yang perlu diubah
Misalnya, jika konten yang ada di dalam <h1>Hi, universe!</h1>0 adalah ini
<h1>Hi, universe!</h1>
Reef hanya akan memperbarui teks di dalam <h1>Hi, universe!</h1>1 alih-alih membuat elemen yang sama sekali baru
Agar itu berfungsi, kita perlu mengonversi string HTML menjadi elemen HTML aktual yang dapat dilalui, dipetakan, dan dianalisis
Membuat metode pembantu
Pertama, mari buat fungsi pembantu yang akan menerima string dan mengembalikan HTML
/** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { // Code goes here... };
Pendekatan sederhana
Cara paling sederhana untuk melakukannya adalah dengan membuat elemen, masukkan string ke dalam dengan innerHTML, lalu kembalikan elemen tersebut
/** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { var dom = document.createElement('div'); dom.innerHTML = str; return dom; };
Namun, pendekatan ini tidak sempurna
Meskipun elemen ini terlepas—yaitu, sebenarnya bukan di DOM yang ada—browser akan tetap melakukan hal-hal seperti mengunduh file gambar
Ini akan memicu file gambar untuk diunduh, meskipun markup belum ditampilkan di mana pun
stringToHTML('<img src="my-awesome-photo.jpg">');
Cara yang lebih baik
Setelah melakukan banyak penelitian, saya menemukan metode browser asli yang menghindari masalah ini. <h1>Hi, universe!</h1>3. Objek <h1>Hi, universe!</h1>_3 membuat dokumen DOM baru dari sebuah string
Untuk menggunakannya, Anda membuat instance baru. Kemudian Anda menggunakan metode <h1>Hi, universe!</h1>5 untuk mengubah string Anda menjadi elemen <h1>Hi, universe!</h1>6 baru. Metode menerima string sebagai argumen pertama. Setel argumen kedua ke <h1>Hi, universe!</h1>_7
Karena ini benar-benar elemen <h1>Hi, universe!</h1>_6 baru, kami akan mengembalikan <h1>Hi, universe!</h1>9
/** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { var parser = new DOMParser(); var doc = parser.parseFromString(str, 'text/html'); return doc.body; };
Sekarang kita dapat melakukan ini, dan tidak ada pengunduhan yang akan dipicu
stringToHTML('<img src="my-awesome-photo.jpg">');
Menggabungkan dua pendekatan
Metode <h1>Hi, universe!</h1>_3 mengagumkan, tetapi metode <h1>Hi, universe!</h1>5 berhenti di IE10
Saya suka menggabungkan dua pendekatan, menggunakan <h1>Hi, universe!</h1>3 saat didukung, dan mundur untuk membuat elemen dan menggunakan innerHTML saat tidak didukung
Untuk menguji dukungan, kami akan menetapkan IIFE ke variabel /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { // Code goes here... }; 4
Di dalam IIFE, pertama-tama kami akan memeriksa apakah /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { // Code goes here... }; 5 ada di /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { // Code goes here... }; 6. Jika tidak, kami akan mengembalikan /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { // Code goes here... }; 7. Selanjutnya, kami akan mencoba menggunakan <h1>Hi, universe!</h1>_5 untuk membuat <h1>Hi, universe!</h1>6. Jika gagal, kami akan mengembalikan /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { // Code goes here... }; 7. Jika tidak, kami akan mengembalikan /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { var dom = document.createElement('div'); dom.innerHTML = str; return dom; }; 1
var support = (function () { if (!window.DOMParser) return false; var parser = new DOMParser(); try { parser.parseFromString('x', 'text/html'); } catch(err) { return false; } return true; })();
Di dalam metode /** * Convert a template string into HTML DOM nodes * @param {String} str The template string * @return {Node} The template HTML */ var stringToHTML = function (str) { var dom = document.createElement('div'); dom.innerHTML = str; return dom; }; _2 kami, kami akan menggunakan <h1>Hi, universe!</h1>3 jika didukung, dan innerHTML jika tidak didukung