| メソッド | できること |
|---|---|
| document.createElement(' ') | HTMLタグを作る |
| document.createTextNode(' ') | テキストを作る nodeValueとして。textContentではない。 |
| 親要素.appendChild( 変数 ) | ノードの子要素の最後に、新たに作ったノードを追加する |
| 親要素.insertBefore(追加したい変数 , 挿入したい場所の後にくる変数) | 要素の直前に要素を新たに追加する | 親要素.removeChild( 変数 ) | 要素を削除する |
| 親要素.cloneNode( true か false ) | 要素を複製する（trueなら子要素も複製 falseなら自身のみ複製） |
| 親要素.replaceChild( new , old ) | 要素を置き換える |
三男を（削除して）長女に置き換える例
<ul id="family"> <li>長男</li> <li>次男</li> <li>三男</li> </ul> <input type="button" id="btn" value="三男を（削除して）長女に置き換える" /> <script type="text/JavaScript"> var btn = document.getElementById('btn'); btn.onclick = function(){ var myFamily = document.getElementById('family'); var sannan = document.getElementsByTagName('li').item(2); // 三男を取得 /************************************************* 長女を作成 **************************************************/ var newElement = document.createElement('LI'); // 新たに<li>を作成 var newTextNode = document.createTextNode('長女'); // 新たにnodeValue「長女」を作成 newElement.appendChild(newTextNode); // <li>に「長女」を追加 /************************************************* 置き換え **************************************************/ myFamily.appendChild(newElement); // <li>リストの一番最後に「長女」を追加 myFamily.replaceChild(newElement , sannan); // 「三男」と「長女」を置き換え btn.disabled = true; } </script> ※removeChild(sannan);をしなくても削除される。myFamily.appendChild(newElement);と一旦追加したあとで置き換えている。