||Working with elements||

` を生成し、 id が "`div1`" である要素の前に挿入します。 #### HTML ```html ||Working with elements||

The text above has been created dynamically.

``` #### JavaScript ```js document.body.onload = addElement; function addElement () { // 新しい div 要素を作成します const newDiv = document.createElement("div"); // いくつかの内容を与えます const newContent = document.createTextNode("Hi there and greetings!"); // テキストノードを新規作成した div に追加します newDiv.appendChild(newContent); // DOM に新しく作られた要素とその内容を追加します const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); } ``` #### 結果 {{EmbedLiveSample("Basic_example", 500, 80)}} ### ウェブコンポーネントの例以下の例の断片は [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")}} 要素を表します。 ```js // 要素のためのクラスを作成 class ExpandingList extends HTMLUListElement { constructor() { // コンストラクターでは常に super を最初に呼び出す super(); // コンストラクターの定義は簡略化のため省略します。 ... } } // 新しい要素を定義 customElements.define('expanding-list', ExpandingList, { extends: "ul" }); ``` この要素のインスタンスをプログラムで生成したければ、次の行のような呼び出しを使用します。 ```js let expandingList = document.createElement('ul', { is : 'expanding-list' }) ``` 新しい要素には [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性が与えられ、その値はカスタム要素のタグ名になります。 > **Note:** [カスタム要素仕様書](https://www.w3.org/TR/custom-elements/)の以前のバージョンととの後方互換性のため、一部のブラウザーはオブジェクトの代わりに文字列を渡すことを認めており、この文字列はカスタム要素のタグ名です。 ## 仕様書 {{Specifications}} ## ブラウザーの互換性 {{Compat}} ## 関連情報 - {{domxref("Node.removeChild()")}} - {{domxref("Node.replaceChild()")}} - {{domxref("Node.appendChild()")}} - {{domxref("Node.insertBefore()")}} - {{domxref("Node.hasChildNodes()")}} - {{domxref("document.createElementNS()")}} — 要素の名前空間 URI を明示的に指定するために使用