Cara mengonversi string ke elemen html di javascript

jQuery.parseHTML menggunakan metode asli untuk mengonversi string menjadi sekumpulan node DOM, yang kemudian dapat dimasukkan ke dalam dokumen. Metode-metode ini merender semua teks di belakang atau di depan (bahkan jika itu hanya spasi kosong). Untuk mencegah spasi spasi akhir/awal dikonversi menjadi simpul teks, Anda dapat meneruskan string HTML melalui jQuery.trim

Secara default, context adalah document saat ini jika tidak ditentukan atau diberikan sebagai null atau undefined. Jika HTML akan digunakan dalam dokumen lain seperti iframe, dokumen frame tersebut dapat digunakan

Pada 3. 0 perilaku default diubah. Jika context tidak ditentukan atau diberikan sebagai null atau undefined, document baru digunakan. Ini berpotensi meningkatkan keamanan karena peristiwa sebaris tidak akan dijalankan saat HTML diuraikan. Setelah HTML yang diurai disuntikkan ke dalam dokumen, ia akan mengeksekusi, tetapi ini memberikan kesempatan kepada alat untuk melintasi DOM yang dibuat dan menghapus apa pun yang dianggap tidak aman. Penyempurnaan ini tidak berlaku untuk penggunaan internal jQuery.parseHTML karena biasanya diteruskan dalam document saat ini. Oleh karena itu, pernyataan seperti document_5 masih tunduk pada injeksi kode berbahaya

Pertimbangan Keamanan

Sebagian besar API jQuery yang menerima string HTML akan menjalankan skrip yang disertakan dalam HTML. jQuery.parseHTML tidak menjalankan skrip dalam HTML yang diuraikan kecuali document7 secara eksplisit document8. Namun, sebagian besar lingkungan masih dapat mengeksekusi skrip secara tidak langsung, misalnya melalui atribut document9. Penelepon harus mengetahui hal ini dan mencegahnya dengan membersihkan atau keluar dari masukan yang tidak dipercaya dari sumber seperti URL atau cookie. Untuk kompatibilitas di masa mendatang, penelepon tidak boleh bergantung pada kemampuan untuk menjalankan konten skrip apa pun saat document7 tidak ditentukan atau false

Posting asli saya menampilkan DOMParser, API JavaScript untuk mengonversi string HTML menjadi node DOM. Sementara DOMParser bekerja dengan baik dalam banyak kasus, API tersebut memang memiliki beberapa sisi kasar dan tidak berkinerja seperti API lainnya.

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

Belum lama berselang sebagian besar browser mengalami stagnasi dalam penerapan API dan fitur baru, yang menyebabkan munculnya MooTools (FTW), jQuery, Dojo Toolkit, Prototype, dan juga JavaScript toolkit. Kemudian kami mulai melakukan lebih banyak rendering sisi klien dan terpaksa menggunakan berbagai trik untuk menangani template, termasuk string HTML besar-besaran di JavaScript kami dan bahkan menyalahgunakan

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

Tentu saja setelah Anda menempatkan konten Anda ke dalam template, Anda kemudian perlu mengubah string itu menjadi simpul DOM, dan proses itu memiliki beberapa triknya sendiri, seperti membuat

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two




*/

Saat ini ada cara yang sedikit diketahui (tetapi standar) untuk mengonversi string ke DOM dengan JavaScript.

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

Saya telah menyentuh

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

// Use a DocumentFragment to store and then mass inject a list of DOM nodes
var frag = document.createDocumentFragment();
for(var x = 0; x < 10; x++) {
	var li = document.createElement("li");
	li.innerHTML = "List item " + x;
	frag.appendChild(li);
}

Untuk membuat node DOM dari string HTML kita akan menggunakan

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

let frag = document.createRange().createContextualFragment('
One



Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

let frag = document.createRange().createContextualFragment('
One
Two
');
console.log(frag);

/*
  #document-fragment
    
One
    
Two
*/

let frag = document.createRange().createContextualFragment('
One
Two



');
console.log(frag);
/*
#document-fragment
One
Two
*/

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

Saat Anda siap menyuntikkan semua node DOM yang dibuat, Anda cukup mengeksekusi

// "placementNode" will be the parent of the nodes within the DocumentFragment
placementNode.appendChild(frag);

Anda juga dapat menyuntikkan node satu per satu

placementNode.appendChild(frag.firstChild);

Fungsi

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

Posting Asli. DOMParser

Hari ini kami memiliki cara standar untuk mengonversi string ke DOM dengan JavaScript. DOMParser

JavaScript

Yang perlu Anda lakukan hanyalah membuat instance DOMParser dan menggunakan metode

// "placementNode" will be the parent of the nodes within the DocumentFragment
placementNode.appendChild(frag);

2

let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');

Dikembalikan adalah

// "placementNode" will be the parent of the nodes within the DocumentFragment
placementNode.appendChild(frag);

_3 berisi node yang dihasilkan dari string Anda. Dengan kata

// "placementNode" will be the parent of the nodes within the DocumentFragment
placementNode.appendChild(frag);

_3 Anda dapat menggunakan metode traversal node standar untuk mengambil node yang kami tentukan dalam string kami

let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
let div = doc.body.firstChild;

let divs = doc.body.querySelectorAll('div');

Anda tidak memerlukan elemen pembungkus tunggal seperti komponen JSX -- Anda dapat memiliki elemen saudara

let doc = new DOMParser().parseFromString('<div>1</div><div>2</div>', 'text/html');
let firstDiv = doc.body.firstChild;
let secondDiv = firstDiv.nextSibling;

Inilah fungsi pembungkus sederhana untuk DOMParser untuk mengambil node

let getNodes = str => new DOMParser().parseFromString(str, 'text/html').body.childNodes;

let nodes = getNodes('<div>1</div><div>2</div>');

// [div, div] 

Objek DOMParser_ adalah metode yang mengagumkan dan masuk akal untuk mengonversi string menjadi simpul DOM dalam JavaScript. Singkirkan shims lama Anda dan beralihlah ke API yang efisien dan sederhana ini

Bagaimana cara mengonversi string ke elemen HTML di JS?

Cara termudah untuk melakukan ini adalah membuat elemen, memasukkan string ke dalam dengan innerHTML , lalu mengembalikan elemen . /** * Mengubah string template menjadi node DOM HTML * @param {String} str String template * @return {Node} HTML template */ var stringToHTML = function (str) { var dom = dokumen.

Bagaimana cara mengubah string menjadi HTML?

biarkan ConvertStringToHTML = function (str) { biarkan parser = new DOMParser(); . parseFromString(str, 'text/html'); . tubuh; . In this code, we have created a function expression and defined a function inside of it.

Bagaimana cara membuat elemen HTML menggunakan JavaScript?

Kode ini membuat elemen .

const para = dokumen. createElement("p");

node const = dokumen. createTextNode("Ini adalah paragraf baru. ");

para. appendChild(simpul);

elemen const = dokumen. getElementById("div1");

elemen. .

const elmnt = dokumen. getElementById("p1");

elmnt. menghapus();

induk induk = dokumen

Bagaimana cara mengonversi string ke HTML di jQuery?

parseHTML( data [, konteks ] [, keepScripts ] ) jQuery. parseHTML menggunakan metode asli untuk mengonversi string menjadi sekumpulan node DOM, yang kemudian dapat dimasukkan ke dalam dokumen. Metode-metode ini merender semua teks di belakang atau di depan (bahkan jika itu hanya spasi kosong).