[JavaScript General] ノードを追加／置換／削除する

用語の整理。

[markdown]

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.08.19

山田 祥寛
技術評論社
売り上げランキング: 7,192

Amazon.co.jpで詳細を見る

## innerHTML プロパティとの使い分け

シンプルなコンテンツの編集に利用する事ができる。

> * [element.innerHTML – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML)
>
> Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。
>
>plain text を挿入するときには innerHTML を使用せず、代わりに node.textContent を使用することをおすすめします。こちらは渡された contentを HTML として解釈せずに、raw text として挿入します。

See the Pen JavaScript getElementById by DriftwoodJP (@DriftwoodJP) on CodePen.

IE9+

> * [Node.textContent – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)
>
> そのノードおよびすべての子孫の全テキスト内容を取得したり設定したりします。

複雑なコンテンツの編集には、以下のオブジェクトツリーを操作するアプローチと使い分けるのが良い。

## 新規にノードを作成する

See the Pen JavaScript create new Node by DriftwoodJP (@DriftwoodJP) on CodePen.

### 要素／テキストノードを作成する

> * [Document.createElement() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
> * [Document.createTextNode() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode)

### ノード同士を組み立てる

> * [Node.appendChild() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)

以下でも置き換えられる。

> * [Node.insertBefore() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)

### 属性ノードを追加する

属性と同名のプロパティを設定する。

“`javascript
let anchor = document.createElement(‘a’);
anchor.href = fm.url.value;
“`

`createAttribute` メソッドも利用できる。

> * [Document.createAttribute() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/createAttribute)

“`javascript
let anchor = document.createElement(‘a’);
let href = document.createAttribute(‘href’);
href.nodeValue = fm.url.value;
anchor.setAttributeNode(href);
“`

属性ノードの値を設定するには、`nodeValue` プロパティを使用する。

> * [Node.nodeValue – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)

属性ノードを要素ノードに関連づけるには、`setAttributeNode` メソッドを使用する。

> * [Element.setAttributeNode() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNode)

## 既存ノードを置換／削除する

See the Pen JavaScript replace and remove a node by DriftwoodJP (@DriftwoodJP) on CodePen.

### ノードを置換する

> * [Node.replaceChild() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild)

### ノードを削除する

> * [Node.removeChild() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)

### 属性ノードを削除する

> * [Element.removeAttribute() – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute)

## 補遺

> * [JavaScriptのDOM Core基礎 – 三等兵](http://d.hatena.ne.jp/sandai/20100823/p1#022)
> * [Element Traversal API – 三等兵](http://d.hatena.ne.jp/sandai/20101220/p1)
[/markdown]