DOMImplementation: createHTMLDocument() メソッド

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

関連情報