ノードを作成(createElement,createTextNode,他)

新しいノードを作成する方法です。作成したノードは DOM に追加することで DOM ツリーに追加されます。ノードの作成はノードの種類に応じて異なるメソッドが Document オブジェクトで用意されています。ここでは createElement メソッドなどを使って新しいノードを作成する方法について解説します。

(Last modified: 2023年02月03日)

要素ノードを作成する

Document オブジェクトの createElement メソッドは新しい要素ノードを作成します。書式は次のとおりです。

document.createElement(localname)

1 番目の引数に作成する要素ノードのタグ名を DOMString オブジェクトで指定してください。戻り値は Element オブジェクトが返ります。

例えば div タグの要素ノードを新しく作成するには次のように記述します。

let element = document.createElement('div');

console.log(element.nodeName);
>> DIV
console.log(element.nodeType);
>> 1
console.log(element.nodeValue);
>> null

作成したノードは DOM に追加されるまでは単に作成されただけです。他の種類のノードに着いても同じです。

テキストノードを作成する

Document オブジェクトの createTextNode メソッドは新しいテキストノードを作成します。書式は次のとおりです。

document.createTextNode(data)

1 番目の引数に作成するテキストノードのテキストを DOMString オブジェクトで指定してください。戻り値は Text オブジェクトが返ります。

例えば 'Hello' というテキストを持つテキストノードを新しく作成するには次のように記述します。

let txtnode = document.createTextNode('Hello');

console.log(txtnode.nodeName);
>> #text
console.log(txtnode.nodeType);
>> 3
console.log(txtnode.nodeValue);
>> Hello

属性ノードを作成する

Document オブジェクトの createAttribute メソッドは新しい属性ノードを作成します。書式は次のとおりです。

document.createAttribute(localname)

1 番目の引数に作成する属性ノードの属性名を DOMString オブジェクトで指定してください。戻り値は Attr オブジェクトが返ります。

属性名に対する属性値の設定は、戻り値で取得した Attr オブジェクトの value プロパティに値を設定してください。

例えば属性名 id 、属性値 'main' という属性ノードを新しく作成するには次のように記述します。

let attrnode = document.createAttribute('id');
attrnode.value = 'main';

console.log(attrnode.nodeName);
>> id
console.log(attrnode.nodeType);
>> 2
console.log(attrnode.nodeValue);
>> main

作成した属性ノードを要素ノードに追加するには Element オブジェクトの setAttributeNode メソッドを使います。

let element = document.createElement('div');
let attrnode = document.createAttribute('id');
attrnode.value = 'main';

element.setAttributeNode(attrnode);

コメントノードを作成する

Document オブジェクトの createComment メソッドは新しいコメントノードを作成します。書式は次のとおりです。

document.createComment(data)

1 番目の引数に作成するコメントノードの値を DOMString オブジェクトで指定してください。戻り値は Comment オブジェクトが返ります。

例えば 'Create by Taro' というコメントの値を持つコメントノードを新しく作成するには次のように記述します。

let commentnode = document.createComment('Create by Taro');

console.log(commentnode.nodeName);
>> #comment
console.log(commentnode.nodeType);
>> 8
console.log(commentnode.nodeValue);
>> Create by Taro

ドキュメントの断片を作成する

Document オブジェクトの createDocumentFragment メソッドは新しいドキュメントの断片を作成します。書式は次のとおりです。

document.createDocumentFragment()

空のドキュメントの断片を作成します。戻り値は DocumentFragment オブジェクトが返ります。

ドキュメントの断片とは、多くのノードをなどを DOM に追加する場合に一時的にノードをまとめるために使用されるものです。 DOM に一つ一つノードを追加していくとその都度ブラウザでの表示位置の調整が発生する可能性がありますが、いったんドキュメントの断片にノードの追加を行ってから、ドキュメントの断片を DOM に追加することで表示位置の調整が一度で済みます。

例えばドキュメントの断片を新しく作成するには次のように記述します。

let fragment  = document.createDocumentFragment();

console.log(fragment .nodeName);
>> #document-fragment
console.log(fragment .nodeType);
>> 11
console.log(fragment .nodeValue);
>> null

-- --

createElement メソッドなどを使って新しいノードを作成する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。