DOMImplementation.createHTMLDocument

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

概述

该方法 (属于document.implementation) 用来创建一个新的 HTML 文档。

语法

var doc = document.implementation.createHTMLDocument(title);

doc 是新建的 HTML 文档。
title 是 doc 中的 title 标签中的文本。

例子

下面的例子演示如何创建了一个新的 HTML 文档，并把它插入到当前文档的一个<iframe>中。

查看在线演示

例子中的 HTML 代码如下：

html

<body>
  <p>
    Click <a href="javascript:makeDocument()">here</a> to create a new document
    and insert it below.
  </p>
  <iframe id="theFrame" src="about:blank" />
</body>

例子中用 JavaScript 实现的makeDocument()方法如下：

function makeDocument() {
  var frame = document.getElementById("theFrame");

  var doc = document.implementation.createHTMLDocument("New Document");
  var p = doc.createElement("p");
  p.innerHTML = "This is a new paragraph.";

  try {
    doc.body.appendChild(p);
  } catch (e) {
    console.log(e);
  }

  // 将新建的 HTML 文档放到 iframe 中。

  var destDocument = frame.contentDocument;
  var srcNode = doc.documentElement;
  var newNode = destDocument.importNode(srcNode, true);

  destDocument.replaceChild(newNode, destDocument.documentElement);
}

代码 4-12 行创建了一个新的 HTML 文档，并在里面插入一些内容。第 4 行 createHTMLDocument()构造了一个标题为"New Document"的 HTML 文档。5-6 行创建了一个段落元素并在里面插入了一些内容，8-12 行将新建的段落元素插入到 HTML 文档中。

16 行获取了 iframe 的contentDocument 属性。这是我们将要插入新建的 HTML 文档的地方。下面的两行将新建的 HTML 文档插入到了 iframe 的根元素中。这样，我们用 20 行代码实现了用一个新建的 HTML 文档替换 iframe 中原有文档的目的。

备注

新生成的 HTML 文档有如下的初始结构：

html

<!doctype html>
<html>
  <head>
    <title>title</title>
  </head>
  <body></body>
</html>

译者注：

alert(document.implementation.createHTMLDocument("myTitle").documentElement.outerHTML)

//<html><head><title>myTitle</title></head><body></body></html>

规范

createHTMLDocument specification