||Working with elements||

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

構文

引数

返値

例

基本的な例

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

HTML

` を生成し、 id が "`div1`" である要素の前に挿入します。 -

<!DOCTYPE html>
-<html>
-<head>
-  <title>||Working with elements||</title>
-</head>
-<body>
-  <div id="div1">The text above has been created dynamically.</div>
-</body>
-</html>
-

+#### HTML -

JavaScript

+```html + + + + ||Working with elements|| + + +

The text above has been created dynamically.

+ + +``` -

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);
-}

+} +``` + +#### 結果 -

+{{EmbedLiveSample("Basic_example", 500, 80)}} -

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

+### ウェブコンポーネントの例 -

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

+以下の例の断片は [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")}} 要素を表します。 -

// 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" });

+// 新しい要素を定義 +customElements.define('expanding-list', ExpandingList, { extends: "ul" }); +``` -

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

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

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

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

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

+新しい要素には [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性が与えられ、その値はカスタム要素のタグ名になります。 -

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

+> **Note:** [カスタム要素仕様書](https://www.w3.org/TR/custom-elements/)の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -

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

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

+{{Compat}} -

構文

引数

返値

例

基本的な例

HTML

JavaScript

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

仕様書

ブラウザーの互換性

関連情報