Tiga Cara untuk Membuat Dokumen HTML on the Fly

Membuat dokumen HTML dengan cepat, dengan atau tanpa JavaScript, terkadang diperlukan. Apakah tujuannya adalah untuk menampilkan halaman pengakuan atau iframe yang berisi seluruh halaman, jika dokumen cukup sederhana, dapat dengan mudah disatukan dan disajikan dengan URL data atau JavaScript.

Tapi, bagaimana Anda melakukannya? Saya yakin Anda sudah tahu cara menambahkan HTML ke dokumen menggunakan JavaScript, tetapi untuk buat seluruh dokumen HTML? Anda mungkin tertarik pada beberapa metode yang akan saya tunjukkan di bawah ini, yang pertama bahkan tidak perlu JavaScript!

Saya akan menunjukkan semua dokumen yang baru dibuat di iframe sehingga Anda bisa melihat mereka diberikan. Namun, Anda dapat menggunakan dokumen tersebut sesuai keinginan Anda. Misalnya, mereka bisa disimpan ke dalam basis data atau dikirim melintasi layanan web untuk diberikan di tempat lain.

1. URL data

URL data memberi Anda metode sederhana dan efektif untuk melayani dokumen di halaman web. Jika Anda tidak terbiasa dengan itu baca artikel kami sebelumnya tentang cara kerjanya.

Pada dasarnya, URL data mulai dengan data: Skema URL. Diikuti oleh konten yang akan disajikan, sebelum itu Anda dapat menyebutkan tipe media dan penyandian konten.

Anda mungkin pernah melihat gambar disajikan dengan cara ini, di mana karakter base64 diberikan sebagai konten URL data, mengikuti jenis media.

Kode di atas menampilkan gambar PNG pria dengan emoji laptop - Anda dapat memeriksanya di browser Anda.

Mirip dengan bagaimana hal ini dilakukan, URL data juga dapat melayani dokumen HTML:

Iframe merender dokumen HTML yang ditambahkan menggunakan URL data yang berisi teks / html jenis media & diikuti oleh kode HTML.

Anda dapat mengedit demo Codepen di bawah ini dengan menambahkan HTML tambahan ke dalamnya jika Anda ingin melihat cara kerjanya.

2. antarmuka DOMImplementation

Aplikasi DOMI adalah antarmuka yang bisa buat dokumen baru menggunakan salah satu nya createDocument () (untuk XML) atau createHTMLDocument () metode-mana yang Anda butuhkan. Antarmuka diakses menggunakan dokumen. implementasi obyek.

Itu createHTMLDocument () metode mengambil satu parameter opsional yang merupakan judul dokumen baru.

Kamu bisa tambahkan HTML ke dokumen yang baru dibuat cara yang biasa Anda lakukan: dengan menggunakan metode seperti menambahkan(), appendChild (), dan metode JavaScript terkait DOM lainnya.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Dalam kode di atas, a dokumen HTML baru dibuat menggunakan createHTMLDocument () metode Aplikasi DOMI antarmuka dan Halo Dunia! string adalah ditambahkan ke elemen tubuhnya.

Kemudian, untuk melihat bagaimana dokumen yang baru dibuat terlihat ketika itu diberikan, saya mengganti elemen dokumen iframe (iframeDoc.documentElement) dengan elemen dokumen dari dokumen baru (doc.documentElement) menggunakan gantiChild () metode. Dengan cara ini, kamu akan dapat melihat Halo Dunia! tali dari dokumen yang kami buat dan tambahkan ke iframe.

3. API DOMParser

Seperti namanya, the DOMParser API mem-parsing string HTML / XML ke dalam dokumen DOM.

Baru DOMParser contoh objek dapat dibuat menggunakan konstruktornya, DOMParser (). Instance memegang metode yang disebut parseFromString () bahwa melakukan parsing setelah mengambil dua argumen: string yang akan diuraikan dan jenis dokumen dari dokumen yang akan dibuat.

 window.onload = () => var parser = DOMParser baru (); var doc = parser.parseFromString ('Halo Dunia! ', "text / html"); doc.body.append ('teks tambahan'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Dalam kode di atas, baru DOMParser contoh mem-parsing string HTML ke dokumen DOM menggunakan parseFromString () metode.

Kemudian, dengan cara yang sama seperti dalam cuplikan kode sebelumnya, elemen dokumen dari dokumen yang baru dibuat mengganti elemen dokumen iframe. Akibatnya, kode HTML dalam dokumen yang kami buat menjadi terlihat di iframe.