エレメントの取得・追加・移動・削除

エレメントの取得

　エレメントを取得する方法には、メソッドまたはプロパティによる方法があります。まずメソッドによるエレメントの取得について触れます。

var element_obj = document.getElementById('Example');

var element = document.getElementById('Example');
var list_element = element.getElementsByTagName("p");

var element_obj = element.querySelector("div.example p#content");

var list_element = element.querySelectorAll("input[type='text']");

var list_element = document.getElementById('Example').children;

var element_obj = document.getElementById('Example').parentElement;

エレメントの追加

　エレメントの追加によってそのエレメントを表示するは以下のように、document.createElement() メソッドで新規にエレメントを作成し、.appendChild() メソッドなどによって web ページに追加する必要があります。

createElement() メソッドでエレメントの新規作成

↓
appendChild() メソッドなどでエレメントを追加

↓
表示される

　注意点として、エレメントの追加は常に子エレメントの最後尾に追加されます。

　まずはエレメントの新規作成を document.createElement() メソッドで行います。

var element_obj = document.createElement('p',{id:'id_',class:'css_'});
element_obj.innerHTML = "Example Text"

　document.createElement() メソッドで作成されたエレメントはドキュメント上にありますが表示はされていません。 既存のエレメントに包括することで表示されます。
　包括には以下のような .appendChild() メソッドを使用します。このメソッドによってまず指定エレメントの最後尾に追加、そして表示されます。

document.getElementById('container').appendChild( element_obj );

　.append() メソッドでもエレメントを追加することができます。.append() メソッドは複数の Node オブジェクトまたはテキストが引数として使用できます。

document.getElementById('container').append(' Hello! ');

　最後尾に追加したエレメントは以下の .insertBefore() メソッドで移動することができます。

　また、エレメントの追加に関して詳しくはエレメントの作成について　エレメントの新規作成を参照してください。

エレメントの移動

移動

　追加したエレメントは希望する箇所に表示されるとは限りません。任意の箇所に表示したい場合は以下のメソッドを使用して移動する必要があります。

　以下の.insertBefore() は、第１引数の前に第２引数のエレメントを追加します。

document.getElementById('over').insertBefore( document.getElementById('after_element'), document.getElementById('inset_element') );

　.insertBefore() メソッドは第２引数を既存のエレメントに対して実行すると移動になります。

　Document と Element、 どちらのオブジェクトでも使用できます。

置換

　置き換えには、.replaceChild() メソッドを使用します。

document.getElementById('over').replaceChild( document.getElementById('inset_element'), document.getElementById('old_element') );

　上記は Node オブジェクトのメソッドですが、HTML の各タグエレメントは HTMLElement を通してそのプロパティとメソッドを継承していますので上記のメソッドを利用することができます。

　詳しくはエレメントの作成について　エレメントの移動を参照してください。

エレメントの削除

　エレメントの削除には以下の .removeChild() メソッドを使用します。

document.getElementById('over').removeChild( document.getElementById('example') );

　.removeChild() メソッドは Document と Element オブジェクト、どちらでも使用できます。

innerHTML、outerHTML

　innerHTML、outerHTML プロパティに以下のような何もない文字列を設定することでエレメントを削除することもできます。

document.getElementById('example').innerHTML = "";

　詳しくはエレメントの作成について　エレメントの削除を参照してください。

関連するプロパティ

　エレメントの取得、追加、移動、削除において関連するプロパティには以下があります。

プロパティ