Anda memiliki kontrol lebih besar jika menggunakan fungsi insertAdjacentHTML
karena Anda dapat menempatkan HTML baru di empat tempat berbeda
text inside node
Anda menggunakannya seperti…
el.insertAdjacentHTML['beforebegin', string_of_html];
el.insertAdjacentHTML['afterbegin', string_of_html];
el.insertAdjacentHTML['beforeend', string_of_html];
el.insertAdjacentHTML['afterend', string_of_html];
_Ada keadaan di mana Anda mungkin ingin DOM yang baru dibuat masih dalam JavaScript sebelum Anda melakukan apa pun dengannya. Dalam hal ini, Anda dapat mengurai string Anda terlebih dahulu, seperti
let dom = new DOMParser[]
.parseFromString[string_of_html, 'text/html'];
Itu akan memberi Anda DOM lengkap, jadi Anda harus mencabut anak yang Anda tambahkan. Dengan asumsi itu hanya memiliki satu elemen induk, itu seperti…
let dom = new DOMParser[]
.parseFromString[string_of_html, 'text/html'];
let new_element = dom.body.firstElementChild;
Sekarang Anda dapat mengotak-atik new_element
itu sesuai kebutuhan, saya kira sebelum melakukan apa yang perlu Anda lakukan dengannya
Ini sedikit lebih mudah untuk melakukan ini
let new_element = document.createRange[]
.createContextualFragment[string_of_html];
_Anda akan mendapatkan elemen secara langsung sebagai fragmen dokumen untuk ditambahkan atau apa pun sesuai kebutuhan. Metode ini terkenal karena akan benar-benar mengeksekusi
document.body.innerHTML = string_of_html;
// Append it instead
document.body.innerHTML += string_of_html;
0s yang ditemukan di dalamnya, yang bisa berguna dan berbahayaAda banyak nuansa untuk semua ini. Misalnya, HTML harus valid. HTML yang rusak tidak akan berfungsi. Salah bentuk mungkin juga mengejutkan Anda, seperti memasukkan
document.body.innerHTML = string_of_html;
// Append it instead
document.body.innerHTML += string_of_html;
1 ke dalam document.body.innerHTML = string_of_html;
// Append it instead
document.body.innerHTML += string_of_html;
2akan gagal karena tidak ada document.body.innerHTML = string_of_html;
// Append it instead
document.body.innerHTML += string_of_html;
3Koen Schaft menulis "Buat simpul DOM dari string HTML" yang mencakup apa yang kita miliki di sini tetapi lebih detail dan dengan lebih banyak gotcha
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 = 'Hello, world!
';
_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
Hi, universe!
0 adalah iniHi, universe!
Reef hanya akan memperbarui teks di dalam
Hi, universe!
1 alih-alih membuat elemen yang sama sekali baruAgar 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[''];
Cara yang lebih baik
Setelah melakukan banyak penelitian, saya menemukan metode browser asli yang menghindari masalah ini.
Hi, universe!
_3. Objek Hi, universe!
_3 membuat dokumen DOM baru dari sebuah stringUntuk menggunakannya, Anda membuat instance baru. Kemudian Anda menggunakan metode
Hi, universe!
_5 untuk mengubah string Anda menjadi elemen Hi, universe!
6 baru. Metode menerima string sebagai argumen pertama. Setel argumen kedua ke Hi, universe!
_7Karena ini benar-benar elemen
Hi, universe!
_6 baru, kami akan mengembalikan Hi, universe!
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[''];
Menggabungkan dua pendekatan
Metode
Hi, universe!
_3 mengagumkan, tetapi metode Hi, universe!
5 berhenti di IE10Saya suka menggabungkan dua pendekatan, menggunakan
Hi, universe!
3 saat didukung, dan mundur untuk membuat elemen dan menggunakan innerHTML
saat tidak didukungUntuk 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...
};
4Di 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 Hi, universe!
5 untuk membuat Hi, universe!
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;
};
1var 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 Hi, universe!
3 jika didukung, dan innerHTML
jika tidak didukung