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月.

DOMImplementation.createHTMLDocument() メソッドは、新しい HTML 文書 (Document) を作成します。

構文

js
createHTMLDocument()
createHTMLDocument(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() {
  let frame = document.getElementById("theFrame");

  let doc = document.implementation.createHTMLDocument("New Document");
  let 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

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

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

4～12 行目のコードは、新しい HTML 文書を作成し、その文書へのコンテンツの挿入を処理するものです。4 行目で createHTMLDocument() を用いて、<title> が "New Document" である新しい HTML 文書を作成しています。5 行目と 6 行目で単純なコンテンツを持つ新しい段落要素を作成し、8～12 行目で新しい段落を新しい文書に挿入する処理をしています。

16 行目はフレームの contentDocument を取り出しています。これは新しいコンテンツを注入する文書内のものです。次の 2 行は、新しい文書のコンテンツを新しい文書のコンテキストにインポートする処理です。最後に、20 行目で実際にフレームのコンテンツを新しい文書のコンテンツに置き換えます。

ライブサンプルを見る

返される文書は、以下の HTML であらかじめ構成されたものになります。

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

仕様書

Specification

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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023年8月2日 by MDN contributors.

View this page on GitHub • Report a problem with this content

ドキュメントオブジェクトモデル (DOM)
DOMImplementation
インスタンスメソッド
DOM に関連するページ
ガイド
1. DOM の構造
2. 属性の反映
3. DOM ツリー上の選択と走査
4. DOM ツリーの構築と更新
5. イベントの扱い

DOMImplementation: createHTMLDocument() メソッド

In this article

構文

引数

返値

例

仕様書

ブラウザーの互換性

関連情報

Help improve MDN