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 berbahaya

Ada 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;

3

Koen 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

<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('
');

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('
');

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

Bagaimana cara mengubah HTML menjadi string di JS?

Bagaimana cara mengubah teks HTML menjadi teks normal dalam JavaScript?

Bagaimana cara mendapatkan teks dari HTML dalam JavaScript?

Bagaimana cara mengonversi kode HTML menjadi teks?