快速创建HTML文档的三种方法

有时需要使用或不使用JavaScript 即时创建HTML文档 。 无论目标是显示确认页面还是包含整个页面的iframe，如果文档足够简单，则可以轻松地将其放在一起并与数据URL或JavaScript一起使用 。

但是，您如何处理呢？ 我确定您已经知道如何使用JavaScript将HTML添加到文档中，但是如何创建整个HTML文档 ？ 您可能会对我将在下面显示的某些方法感兴趣，其中第一种甚至不需要JavaScript！

我将在iframe中显示所有新创建的文档，以便您可以看到它们的呈现。 但是，您可以根据需要使用文档。 例如，它们可以保存到数据库中或通过Web服务发送以呈现在其他位置。

1.数据网址

数据URL为您提供了一种简单有效的方法来在网页上提供文档 。 如果您不熟悉它，请阅读我们之前关于它们如何工作的文章 。

基本上，数据URL 以data: URL scheme开头 。 它后面是要提供的内容 ，在此之前，您可以选择提及媒体类型和内容的编码 。

您可能已经看过图像是通过这种方式提供的，其中base64字符作为媒体URL后的媒体类型给出。

<img src="https://img-blog.csdnimg.cn/2022010621394977966.png"
alt="man with a computer">

上面的代码显示了带有笔记本表情符号的人的PNG图像-您可以在浏览器中对其进行检查。

类似于此操作， 数据URL也可以提供HTML文档 ：

<iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>

iframe 呈现使用数据URL添加HTML文档 ，该数据URL包含text/html媒体类型＆和HTML代码。

如果您想了解该技术的工作原理，可以在下面添加额外HTML来编辑Codepen演示。

2. DOMImplementation界面

DOMImplementation是一个界面，可以使用它的createDocument() （对于XML）或createHTMLDocument()方法（无论您需要什么createHTMLDocument()来创建全新的文档 。 使用document.implementation对象访问该接口。

您可以像平常一样将HTML添加到新创建的文档中 ：使用诸如append() ， appendChild() 方法以及其他与DOM相关JavaScript方法 。

<iframe src=""></iframe>

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

在上面的代码中，使用DOMImplementation接口和Hello World！的createHTMLDocument()方法创建了一个新HTML文档 。 将string 添加到其body元素中 。

然后，要查看新创建的文档在呈现时的外观，我使用replaceChild()方法将iframe的document元素（ iframeDoc.documentElement ）替换为新文档的doc.documentElement元素。 这样，您就可以看到Hello World！ 我们创建并添加到iframe中的文档中的字符串 。

3. DOMParser API

顾名思义， DOMParser API 将HTML / XML字符串解析为DOM文档 。

可以使用其构造函数 DOMParser() 创建一个新的DOMParser对象实例。 该实例拥有一个名为parseFromString()的方法，该方法在接受两个参数后进行解析 ：要解析的字符串和要创建的文档的文档类型。

<iframe src=""></iframe>

window.onload = () => {
  var parser = new DOMParser();
  var doc = parser.parseFromString('<strong>Hello World! </strong>', "text/html");
  doc.body.append('extra text');
  var iframeDoc = document.querySelector('iframe').contentDocument;
  iframeDoc.replaceChild(doc.documentElement, iframeDoc.documentElement);
}

在上面的代码中，新的DOMParser实例使用parseFromString()方法将HTML字符串解析为DOM文档 。

然后，以与先前代码段相同的方式，新创建的文档的document元素替换iframe的document元素 。 结果，我们创建的文档中HTML代码在iframe中变得可见。

翻译自: https://www.hongkiat.com/blog/create-html-documents-on-the-fly/