エレメントの作成について
web ページのエレメント（要素）の作成における追加、移動、削除の方法について網羅した解説です。
簡単な解説はエレメントの取得・追加・移動・削除
を参照してください。
エレメントの作成は、新規にエレメントを作成し既存のエレメントに追加することで表示されます。
var new_elem = document.createElement('p',{id:'id_',class:'css_'});
document.getElementById('container').appendChild( new_elem );
ページ内 Index
注意点について
エレメントの取得、追加、移動、削除での注意点があります。同じエレメントでありながら、Node、Element、HTMLElement といった起因により思ってもいないエラーになることがあります。
特に NodeList と HTMLCollection の違いには注意が必要です。
エレメントの取得、追加、移動、削除は、Node、Element、HTMLElement のいずれかのメソッドを利用します。
その際に、引数や返り値が Node、Element、HTMLElement、NodeList、HTMLCollection の違いに気づかないことがあります。
最新のブラウザはあまりこれらの違いは気にする必要がなくなっていますが、たまにエラーがこれらの違いによって発生します。
エレメントの新規作成
エレメントの追加には新規にエレメントを作成し、appendChild() メソッドなどによって、web ページに追加表示する必要があります。
まずはエレメントの新規作成を document.createElement() メソッドで行います。
var element_obj = document.createElement('p',{id:'id_',class:'css_'});
document.createElement() メソッドで作成されたエレメントはドキュメント上にありますが表示はされていません。 既存のエレメントに包括することで表示されます。表示には以下のようなメソッドによって表示位置を指定します。
Element
| メソッド | 概要 |
|---|---|
| .append() | 最後の子エレメントの後ろに Node インスタンスまたは DOMString を追加 |
| .appendChild() | 引数の Node を最後尾に追加 |
まず Element と Node オブジェクトによるメソッドを取り上げます。HTML の各タグエレメントは HTMLElement を通してそのプロパティとメソッドを継承していますので上記のメソッドを利用することができます。
var new_elem = document.createElement('p',{id:'id_',class:'css_'});
document.getElementById('container').appendChild( new_elem );
Document
document オブジェクトでも以下のメソッドを使用することができます。
ただし、document オブジェクトは特殊で１つの子オブジェクトしか受け付けません。新規にページを作成する場合のみおいては有用かと思います。
| メソッド | 概要 |
|---|---|
| .append() | Document の最後の子エレメントの後ろに Node インスタンスまたは DOMString を追加 |
追加したエレメントを任意の箇所に表示したい場合は移動する必要があります。
その他
エレメントを追加する方法には以下のようなメソッドもあります。
| メソッド | 概要 |
|---|---|
| .insertAdjacentHTML() | テキストをエレメントに変換し指定位置に挿入する |
| .insertAdjacentText() | 指定位置にテキストを挿入 |
エレメントの移動
追加したエレメントは希望する箇所に表示されるとは限りません。任意の箇所に表示したい場合は以下のメソッドを使用して移動する必要があります。
| メソッド | 概要 |
|---|---|
| .insertBefore() | Nodeを指定Nodeの前に挿入 |
| .replaceChild() | 指定した子Nodeを置き換える |
| .replaceChildren() | 指定した子Nodeを置き換える |
上記は Node オブジェクトのメソッドですが、HTML の各タグエレメントは HTMLElement を通してそのプロパティとメソッドを継承していますので上記のメソッドを利用することができます。
document.getElementById('over').insertBefore( document.getElementById('after_element'), document.getElementById('inset_element') );
.insertBefore() メソッドは第２引数を既存のエレメントに対して実行すると移動になります。
エレメントのコピー
以下のメソッドで、エレメントのコピーを行うことができます。
| メソッド | 概要 |
|---|---|
| .cloneNode() | Nodeを複製 |
var new_elem = document.getElementById('example').cloneNode( true );
エレメントの削除
エレメントの削除には以下のメソッドを使用します。
| メソッド | 概要 |
|---|---|
| .removeChild() | 指定した子Nodeを削除 |
| .remove() | 引数で指定された番号をもつ子エレメントの削除 |
var deleted_elem = document.getElementById('over').removeChild( document.getElementById('example') );
innerHTML、outerHTML
innerHTML、outerHTML プロパティに以下のような何もない文字列を設定することでエレメントを削除することもできます。
document.getElementById('example').innerHTML = "";
ただし、エレメントの追加や編集、移動のメソッドと併用すると思わぬエラーが出るかもしれません。ブラウザによって違うかもしれず、使用してみないと分かりません。
関連するプロパティとメソッド
エレメントの取得、追加、移動、削除において関連するプロパティとメソッドには以下があります。
プロパティ
| プロパティ | 概要 |
|---|---|
| Node | |
| .nextSibling | 次の階層のNode |
| .nodeName | Node 名の取得 |
| .previousSibling | 上の階層のNode |
| Element | |
| .childElementCount | 子エレメントの数 |
| .children | 子エレメントを返す |
| .firstElementChild | 最初の子エレメント |
| .lastElementChild | 子エレメントの中で最後のエレメント |
メソッド
| 関連メソッド | 概要 |
|---|---|
| .cloneNode() | Nodeを複製 |
| .compareDocumentPosition() | ノードの相対的な位置 |
| .contains() | 引数のNodeが子孫か否か Boolean型 |
| .getBoxQuads() | NodeのCSSにおいて関連するNodeをリストで返す |
| .getRootNode() | NodeのルートNodeを返す |
| .hasChildNodes() | 子Nodeを持っているか Boolean型 |
| .isEqualNode() | 指定したNodeが同じNodeか否か Boolean型 |
| .isSameNode() | 指定したNodeが同じNodeか否か Boolean型 |
| .normalize() | 全てのテキストNodeを削除 |