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-fragmentOne
Two
*/ _1. Saya telah menulis ulang posting ini untuk menyoroti let frag = document.createRange().createContextualFragment('One
Two
'); console.log(frag); /* #document-fragmentOne
Two
*/ 1, tetapi jika Anda masih ingin mempelajari tentang DOMParser, silakan lihat teks asli di bagian bawah posting iniBelum 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-fragmentOne
Two
*/ 4 tag untuk menahan template kamiTentu 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-fragmentOne
Two
*/ 5 di luar layar, menyetel let frag = document.createRange().createContextualFragment('One
Two
'); console.log(frag); /* #document-fragmentOne
Two
*/ 6 ke nilai string . Setiap perangkat JavaScript akan menggunakan strateginya sendiri untuk mengonversi string menjadi DOM, menyoroti perlunya metode standar untuk menyelesaikan tugas iniSaat 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-fragmentOne
Two
*/ _1Saya telah menyentuh let frag = document.createRange().createContextualFragment('
One
Two
'); console.log(frag); /* #document-fragmentOne
Two
*/ _9 untuk membuat dan menyimpan simpul DOM untuk kinerja di masa lalu, tetapi postingan tersebut mengilustrasikan pembuatan elemen melalui let firstChild = frag.firstChild; let firstDiv = frag.querySelector('div'); let allDivs = frag.querySelectorAll('div'); 0// 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'); 1
let frag = document.createRange().createContextualFragment('One
Two
'); console.log(frag); /* #document-fragmentOne
Two
*/let frag = document.createRange().createContextualFragment('
One
Two
'); console.log(frag); /* #document-fragmentOne
Two
*/ _9 objek berbagi sebagian besar metode yang dimiliki objek let firstChild = frag.firstChild; let firstDiv = frag.querySelector('div'); let allDivs = frag.querySelectorAll('div'); 3, sehingga Anda dapat menggunakan metode DOM biasa seperti let firstChild = frag.firstChild; let firstDiv = frag.querySelector('div'); let allDivs = frag.querySelectorAll('div'); 4 dan let firstChild = frag.firstChild; let firstDiv = frag.querySelector('div'); let allDivs = frag.querySelectorAll('div'); 5 serta properti traversal DOM seperti let frag = document.createRange().createContextualFragment('One
Two
One
Two
*/ 7 dengan hasil let frag = document.createRange().createContextualFragment('One
Two
'); console.log(frag); /* #document-fragmentOne
Two
*/ 9let 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'); 1 adalah metode yang luar biasa dan waras untuk mengonversi string menjadi simpul DOM dalam JavaScript. Singkirkan shims lama Anda dan beralihlah ke API sederhana yang berkinerja ini
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 = dokumenBagaimana 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).