| メソッド | できること |
|---|---|
| document.createElement(' ') | HTMLタグを作る |
| document.createTextNode(' ') | テキストを作る nodeValueとして。textContentではない。 |
| 親要素.appendChild( 変数 ) | ノードの子要素の最後に、新たに作ったノードを追加する |
| 親要素.insertBefore(追加したい変数 , 挿入したい場所の後にくる変数) | 要素の直前に要素を新たに追加する | 親要素.removeChild( 変数 ) | 要素を削除する |
子要素を全て削除する例
<ul id="family"> <li>長男</li> // インデックス[0] 数1 <li>次男</li> // インデックス[1] 数2 <li>三男</li> // インデックス[2] 数3 </ul> <input type="button" id="btn" value="子要素の全てを削除する" /> <script type="text/JavaScript"> var btn = document.getElementById('btn'); btn.onclick = function(){ var del = document.getElementById('family'); for(var i = del.childNodes.length - 1 ; i > 0 ; i--){ // childNodesの数 iは減っていく del.removeChild(del.childNodes[i]); } } </script> もしくは while(del.firstChild){ // firstChildがある間は... del.removeChild(del.firstChild); // firstChildを取り除く } 消したい子ノードの親のエレメントをwhileでぐるぐる回して removeChildで子ノードを削除します。