diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-17 23:48:15 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-24 22:24:17 +0900 |
| commit | 6dd1893ed2d8b7f9285557b6d7c346394eb1464d (patch) | |
| tree | ab452e19bd173a5a30befed38a751933b0c391a4 /files/ja | |
| parent | d9143342090c96bb13317867fefa851e4f0ad5bd (diff) | |
| download | translated-content-6dd1893ed2d8b7f9285557b6d7c346394eb1464d.tar.gz translated-content-6dd1893ed2d8b7f9285557b6d7c346394eb1464d.tar.bz2 translated-content-6dd1893ed2d8b7f9285557b6d7c346394eb1464d.zip | |
2021/09/15 時点の英語版に同期
Diffstat (limited to 'files/ja')
| -rw-r--r-- | files/ja/web/api/document/createelement/index.md | 152 |
1 files changed, 73 insertions, 79 deletions
diff --git a/files/ja/web/api/document/createelement/index.md b/files/ja/web/api/document/createelement/index.md index a7ffc5f4dc..a5bfb18f1b 100644 --- a/files/ja/web/api/document/createelement/index.md +++ b/files/ja/web/api/document/createelement/index.md @@ -5,130 +5,124 @@ tags: - API - DOM - Document - - Method - - Reference - - createElement - メソッド + - リファレンス + - createElement +browser-compat: api.Document.createElement translation_of: Web/API/Document/createElement --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><span class="seoSummary"><a href="/ja/docs/Web/HTML">HTML</a> 文書において、 <strong><code>document.createElement()</code></strong> メソッドは <var>tagName</var> で指定された HTML 要素を生成し、または <var>tagName</var> が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。</span></p> +[HTML](/ja/docs/Web/HTML) 文書において、 **`document.createElement()`** メソッドは _tagName_ で指定された HTML 要素を生成し、または _tagName_ が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: js">var <var>element</var> = <var>document</var>.createElement(<var>tagName</var>[, <var>options</var>]); -</pre> +```js +let element = document.createElement(tagName[, options]); +``` -<h3 id="Parameters" name="Parameters">引数</h3> +### 引数 -<dl> - <dt><var>tagName</var></dt> - <dd>生成される要素の型を特定する文字列。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は <var>tagName</var> の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 <code>createElement()</code> は要素を生成する前に <var>tagName</var> を小文字に変換します。 Firefox, Opera, Chrome では、 <code>createElement(null)</code> は <code>createElement("null")</code> のように動作します。</dd> - <dt><var>options</var>{{optional_inline}}</dt> - <dd>省略可能な <code>ElementCreationOptions</code> オブジェクトで、 <code>is</code> という名前のプロパティをひとつ持ち、その値は前に <code>customElements.define()</code> を使用して定義したカスタム要素の名前です。詳しくは{{anch("Web component example", "ウェブコンポーネントの例")}}を参照してください。</dd> -</dl> +- _tagName_ + - : 生成される要素の型を特定する文字列です。生成される要素の {{domxref("Node.nodeName", "nodeName")}} は _tagName_ の値で初期化されます。このメソッドで修飾名 ("html:a" など) を使用しないでください。 HTML 文書で呼び出すと、 `createElement()` は要素を生成する前に _tagName_ を小文字に変換します。 Firefox, Opera, Chrome では、 `createElement(null)` は `createElement("null")` のように動作します。 +- _options_{{optional_inline}} + - : 省略可能な `ElementCreationOptions` オブジェクトで、 `is` という名前のプロパティをひとつ持ち、その値は前に `customElements.define()` を使用して定義したカスタム要素の名前です。詳しくは{{anch("ウェブコンポーネントの例")}}を参照してください。 -<h3 id="Return_value" name="Return_value">返値</h3> +### 返値 -<p>新しい {{domxref("Element")}}。</p> +新しい {{domxref("Element")}} です。 -<h2 id="Example" name="Example">例</h2> +> **Note:** 文書が {{domxref("HTMLDocument", "HTMLDocument", "", "1")}} である場合、新しい {{domxref("HTMLElement", "HTMLElement", "", "1")}} を返しますが、これが最も一般的です。それ以外の場合は新しい {{domxref("Element","Element","","1")}} を返します。 -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +## 例 -<p>この例では新しい <code><div></code> を生成し、"<code>div1</code>" の id の要素の前に挿入します。</p> +### 基本的な例 -<h4 id="HTML">HTML</h4> +この例では新しい `<div>` を生成し、 id が "`div1`" である要素の前に挿入します。 -<pre class="brush:html"><!DOCTYPE html> -<html> -<head> - <title>||Working with elements||</title> -</head> -<body> - <div id="div1">The text above has been created dynamically.</div> -</body> -</html> -</pre> +#### HTML -<h4 id="JavaScript">JavaScript</h4> +```html +<!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">The text above has been created dynamically.</div> +</body> +</html> +``` -<pre class="brush:js">document.body.onload = addElement; +#### JavaScript + +```js +document.body.onload = addElement; function addElement () { // 新しい div 要素を作成します - var newDiv = document.createElement("div"); + const newDiv = document.createElement("div"); + // いくつかの内容を与えます - var newContent = document.createTextNode("Hi there and greetings!"); + const newContent = document.createTextNode("Hi there and greetings!"); + // テキストノードを新規作成した div に追加します newDiv.appendChild(newContent); // DOM に新しく作られた要素とその内容を追加します - var currentDiv = document.getElementById("div1"); + const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); -}</pre> +} +``` + +#### 結果 -<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> +{{EmbedLiveSample("Basic_example", 500, 80)}} -<h3 id="Web_component_example" name="Web_component_example">ウェブコンポーネントの例</h3> +### ウェブコンポーネントの例 -<p>以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。</p> +以下の例の断片は [expanding-list-web-component](https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component) + の例から取ったものです ([ライブでもご覧ください](https://mdn.github.io/web-components-examples/expanding-list-web-component/))。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。 -<pre class="brush: js">// Create a class for the element +```js +// 要素のためのクラスを作成 class ExpandingList extends HTMLUListElement { constructor() { - // Always call super first in constructor + // コンストラクターでは常に super を最初に呼び出す super(); - // constructor definition left out for brevity + // コンストラクターの定義は簡略化のため省略します。 ... } } -// Define the new element -customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre> +// 新しい要素を定義 +customElements.define('expanding-list', ExpandingList, { extends: "ul" }); +``` -<p>この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。</p> +この要素のインスタンスをプログラムで生成したければ、次の行のような呼び出しを使用します。 -<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> +```js +let expandingList = document.createElement('ul', { is : 'expanding-list' }) +``` -<p>新しい要素には <code><a href="/ja/docs/Web/HTML/Global_attributes/is">is</a></code> 属性が与えられ、その値はカスタム要素のタグ名になります。</p> +新しい要素には [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性が与えられ、その値はカスタム要素のタグ名になります。 -<div class="note"> -<p><strong>注</strong>: <a href="https://www.w3.org/TR/custom-elements/">カスタム要素仕様書</a>の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。</p> -</div> +> **Note:** [カスタム要素仕様書](https://www.w3.org/TR/custom-elements/)の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。 -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Document.createElement")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("document.createElementNS()")}} — 要素の名前空間 URI を明示的に指定するために使用</li> -</ul> +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("document.createElementNS()")}} — 要素の名前空間 URI を明示的に指定するために使用 |