From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/document/createelement/index.html | 136 +++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 files/ja/web/api/document/createelement/index.html (limited to 'files/ja/web/api/document/createelement') diff --git a/files/ja/web/api/document/createelement/index.html b/files/ja/web/api/document/createelement/index.html new file mode 100644 index 0000000000..1c1e9c7ba8 --- /dev/null +++ b/files/ja/web/api/document/createelement/index.html @@ -0,0 +1,136 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Reference + - createElement + - メソッド +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

HTML 文書において、 document.createElement() メソッドは tagName で指定された HTML 要素を生成し、または tagName が認識できない場合は {{domxref("HTMLUnknownElement")}} を生成します。

+ +

構文

+ +
var element = document.createElement(tagName[, options]);
+
+ +

引数

+ +
+
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("Web component example", "ウェブコンポーネントの例")}}を参照してください。
+
+ +

返値

+ +

新しい {{domxref("Element")}}。

+ +

例

+ +

基本的な例

+ +

この例では新しい <div> を生成し、"div1" の id の要素の前に挿入します。

+ +

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>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // 新しい div 要素を作成します
+  var newDiv = document.createElement("div");
+  // いくつかの内容を与えます
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // テキストノードを新規作成した div に追加します
+  newDiv.appendChild(newContent);
+
+  // DOM に新しく作られた要素とその内容を追加します
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

ウェブコンポーネントの例

+ +

以下の例の断片は expanding-list-web-component の例から取ったものです (ライブでもご覧ください)。この場合、カスタム要素は {{domxref("HTMLUListElement")}} を拡張し、 {{htmlelement("ul")}} 要素を表します。

+ +
// Create a class for the element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // constructor definition left out for brevity
+    ...
+  }
+}
+
+// Define the new element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

この要素のインスタンスをプログラム的に生成したければ、次の行のような呼び出しを使用します。

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

新しい要素には is 属性が与えられ、その値はカスタム要素のタグ名になります。

+ +
+

注: カスタム要素仕様書の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.createElement")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf