DOMで要素にテキストを追加する

このページでは、DOMの要素に通常のテキストを追加する方法を紹介します。

[関連キーワード: createTextNode、splitText、normalize]

テキストノード

Nodeインターフェイスがある種構造の中心となっているDOMでは、テキストにもノードを割り当てています。Textインターフェイスはまさしくテキストをノードにしたもので、他のノードと同じようにappendChildメソッドなどで要素(Element)などに追加することができます。

例えば、

[XML]

<element>TextTextTextText</element>

というXMLを解析すると、「element」というノードがあり、その子ノードとして「TextTextTextText」というテキストノードが存在する、という構造になっています。

テキストを追加する

まずはテキストノードを作成します。作成にはDocumentインターフェイスに定義されている「createTextNode」メソッドを使います。

[JavaScript]

var tnode = document.createTextNode("<Any-Text>");

※ createTextNodeメソッドに渡す引数では、「<」など通常XMLを書く場合には「<」と実体参照を用いる必要のある文字でも、実体参照を使わずにそのまま引数の文字列に指定することができます。

作成したノードは他のノードと同様にappendChildメソッドなどを用いて要素に追加します。

[JavaScript]

element.appendChild(tnode);

※ テキストノードを追加する先はElementに限らず、Attr(DOM3まで)、Entity、DocumentFragmentでも可能ですが、Comment、CDATASectionには追加できません(それら自身がテキストを表現します)。

テキストの取得

テキストノードの場合、実際に格納されるテキストはNodeのnodeValueに入ります。

[JavaScript]

var text = tnode.nodeValue;

なお、テキストノードにおけるnodeNameプロパティの値は文字列「#text」ですが、テキストノードかを判定する場合はnodeTypeプロパティを用いるのが良いと思われます。

その他

使用頻度こそ多くないと思われますが、TextインターフェイスにはsplitTextメソッドが定義されており、テキストノードを2つに分割することができます。

[JavaScript]

var tnode2 = tnode.splitText(5);

上記の例では、「tnode」のテキストが「<Any-Text>」である場合、「tnode」は「<Any-」となり、新たに作成された「tnode2」は「Text>」となります。なお、この例で「tnode」が既にある要素に追加されている場合、「tnode2」もその要素に追加された状態(しかも位置的に「tnode」の直後に来る関係)になります。

実行前

some-element [Element]
- some-child [Element]
- "<Any-Text>" [Text] (= tnode)
- some-child2 [Element]
- ...

splitText後

some-element [Element]
- some-child [Element]
- "<Any- [Text] (= tnode)
- Text>" [Text] (= tnode2)
- some-child2 [Element]
- ...

※ splitTextメソッドを呼び出すテキストノードが他のノードの子になっていない場合、単にテキストノードの分割だけを行います(ブラウザー依存？)。

これの使用例としては、テキストとテキストの間に要素(Element)を挿入したい場合、splitTextを呼び出したのち、戻り値のノードを使って親のinsertBeforeメソッドを使うことで実現することができます。

[JavaScript]

var newElem = document.createElement("br");
tnode.parentNode.insertBefore(newElem, tnode2);

一方、連続するテキストノードを結合するメソッドとしてnormalizeメソッドがあります。このメソッドを用いると、Node以下にあるすべての連続するTextが、その連続するノードの先頭にあるテキストノードに結合されます。

実行前

some-element [Element]
- remain [Text]
- some-child [Element]
- "<Any- [Text]
- Text>" [Text]
- (text) [Text]
- some-child2 [Element]
- ...

normalize後

some-element [Element]
- remain [Text]
- some-child [Element]
- "<Any-Text>" (text) [Text]
- some-child2 [Element]
- ...

最終更新日: 2018/02/20