[JavaScript General] ノードを追加／置換／削除する
用語の整理。
JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで
posted with amazlet at 16.08.19
山田 祥寛
技術評論社
売り上げランキング: 7,192
技術評論社
売り上げランキング: 7,192
Contents
innerHTML プロパティとの使い分け
シンプルなコンテンツの編集に利用する事ができる。
Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。
plain text を挿入するときには innerHTML を使用せず、代わりに node.textContent を使用することをおすすめします。こちらは渡された contentを HTML として解釈せずに、raw text として挿入します。
See the Pen JavaScript getElementById by DriftwoodJP (@DriftwoodJP) on CodePen.
IE9+
そのノードおよびすべての子孫の全テキスト内容を取得したり設定したりします。
複雑なコンテンツの編集には、以下のオブジェクトツリーを操作するアプローチと使い分けるのが良い。
新規にノードを作成する
See the Pen JavaScript create new Node by DriftwoodJP (@DriftwoodJP) on CodePen.
要素／テキストノードを作成する
ノード同士を組み立てる
以下でも置き換えられる。
属性ノードを追加する
属性と同名のプロパティを設定する。
let anchor = document.createElement('a');
anchor.href = fm.url.value;
createAttribute メソッドも利用できる。
let anchor = document.createElement('a');
let href = document.createAttribute('href');
href.nodeValue = fm.url.value;
anchor.setAttributeNode(href);
属性ノードの値を設定するには、nodeValue プロパティを使用する。
属性ノードを要素ノードに関連づけるには、setAttributeNode メソッドを使用する。
既存ノードを置換／削除する
See the Pen JavaScript replace and remove a node by DriftwoodJP (@DriftwoodJP) on CodePen.