快速创建HTML文档的三种方法
// 每日前端夜话 第532 篇
// 正文共：1200 字
// 预计阅读时间：5 分钟
有时我们需要即时动态的创建 HTML 文档，无论是目标页，还是显示确定的页面，或者是包含整个页面的 iframe，如果文档足够简单，则可以轻松地将其放在一起并与 data URL 或 JavaScript 配合使用。
你肯定已经知道如何用 JavaScript 将 HTML 添加到文档中，但是要想创建一个完整的 HTML 文档该怎么做呢？下面提供了三种方法，甚至不需要 JavaScript。
交易担保 前端面试星球 每天刷一刷，面试顶呱呱 Mini Program
我将在 iframes 中渲染新创建的文档，以便你可以看到它们的渲染结果。你可以直接使用这些文件，也可以把它们保存到数据库或不同的 Web 服务服务器中在其他地方渲染。
1. Data URL
Data URLs 为在网页上添加文档提供了一个简单有效的方法。
Data URL 以 data: 开始，后面是“URL方案”，也就是要提供的内容，同时你可以设置文件类型和内容的编码。
你可以看到下面这种方式的图像，其中 base64 编码形式的字符串作为内容给出。
<img src="data:image/png;base64,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"
alt="man with a computer">
上面的代码显示下面这张 PNG 图片。
同样，data URL也可以支持 HTML 文档：
<iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>
iframe 能够渲染以 text/html 媒体类型及 HTML 代码为内容的 data URL。
完整代码：
<h4>用 Data URL 创建 HTML 文档</h4>
<iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>
2. Domimplingation接口
DOMImplementation是一个界面，可以用它的 createDocument() （用于XML）或createHTMLDocument() 方法来创建新的文档。通过 document.implementation 对象可以访问该接口。
createHTMLDocument() 方法有一个用来设置新文档标题的可选参数。
可以通过 append()、 appendChild() 等方法将 HTML 添加到新创建的文档：
<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
);
}
在上面的代码中，用 Domimpling 接口的 comperehtmldocument() 方法创建新的HTML文档，并把字符串 Hello World 添加到其 body 元素中。
然后就是渲染新创建的文档，代码中用了 replaceChild() 替换了 iframe（ifRamedoc.documentElement）的文档元素。这样就能看到我们添加文档中的字符串 Hello World! 了 。
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);
}
在上面的代码中，使用 parseFromString() 方法创建了新的 DOMParser 实例，用于将 HTML 字符串解析为 DOM 文档。
然后用和上一个代码段相同的方式，新创建的文档元素换了 iframe 的文档元素。因此我们创建的文档中的 HTML 代码在 iframe 中可见。