appendChild()メソッド

■ appendChild()メソッド
 ・(書式)エレメント.appendChild(追加するノード)
 ・エレメントの子ノードリストの末尾に引数のノードを追加

 *任意の位置にノードを追加する場合 ⇒ insertBefore()メソッド

Sample

関西地方

 

 




(ボタンをクリックする度に追加される)

Sample Source......................................................................>>>

<script language="JavaScript"><!--
 function AppendKansai(ken){
   var list = document.getElementById('list');
   var appen_li = document.createElement('li');//HTML要素の「li」オブジェクトを生成する
   appen_li.innerHTML = ken;  //内容を設定
   list.appendChild(appen_li);  //リストの末尾に追加
 }

 function RemoveKansai(){    //全て削除
   var list = document.getElementById('list');
   var lists = list.getElementsByTagName('li');
   for(var i =lists.length-1;i>-1; i--){  //最後から削除(先頭から削除するとindex番号が狂う)
     list.removeChild(lists[i]);
   }
 }
//--></script>
</head>

<body>
<button onclick="AppendKansai('大阪')">大阪を追加</button>
<button onclick="AppendKansai('京都')">京都を追加</button>
<button onclick="AppendKansai('兵庫')">兵庫を追加</button>
<button onclick="AppendKansai('滋賀')">滋賀を追加</button>
<button onclick="AppendKansai('奈良')">奈良を追加</button>
<button onclick="AppendKansai('和歌山')">和歌山を追加</button>

<button onclick="RemoveKansai()">全て削除</button>  


(最終更新:13/1/4)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>