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.

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

構文

js
createHTMLDocument()
createHTMLDocument(title)

引数

title 省略可

新しい HTML 文書に与えるタイトルを含む文字列です。

返値

新しい HTML の Document オブジェクトです。

例

この例では、新しい 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 Standard
# ref-for-dom-domimplementation-createhtmldocument①

ブラウザーの互換性

BCD tables only load in the browser

関連情報