DOMImplementation: createHTMLDocument() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

DOMImplementation.createHTMLDocument() 方法创建一个新的 HTML Document。

语法

createHTMLDocument()
createHTMLDocument(title)

参数

title 可选: 一个包含新 HTML 文档标题的字符串。

返回值

一个新创建的 HTML Document 对象。

示例

此示例创建了一个新的 HTML 文档，并将其插入到当前文档中的一个 <iframe> 中。

此示例的 HTML 代码如下：

html

<button id="create-doc">Create new document</button>
<iframe id="theFrame" src="about:blank"></iframe>

makeDocument() 的 JavaScript 实现如下：

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

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

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

  // Copy the new HTML document into the frame

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

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

document.getElementById("create-doc").addEventListener("click", makeDocument);

该代码负责创建新的 HTML 文档并向其中插入一些内容。createHTMLDocument() 会构造一个新 HTML 文档，其 <title> 为 "New Document"。然后，我们创建一个带有简单内容的新段落元素，接着将这个新段落插入到新文档中。

destDocument 存储了 frame 的 contentDocument；这是我们将要注入新内容的文档。接下来的两行处理将我们新文档的内容导入到新文档的上下文中。最后，destDocument.replaceChild 实际上用新文档的内容替换了 frame 的内容。

返回的文档预先构建了以下 HTML：

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
  </head>
  <body>
    …
  </body>
</html>

规范

规范
DOM # ref-for-dom-domimplementation-createhtmldocument①

浏览器兼容性

另见

它所属的 DOMImplementation 接口。

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年6月19日，由 MDN 贡献者进行编辑。

在 GitHub 上查看此页面 • 报告此内容的问题