此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

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 ⁨2015年7月⁩.

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

概述

该方法 (属于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()方法如下:

js
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>

规范