appendChild()メソッド
■ appendChild()メソッド
・(書式)エレメント.appendChild(追加するノード)
・エレメントの子ノードリストの末尾に引数のノードを追加
*任意の位置にノードを追加する場合 ⇒ insertBefore()メソッド
Sample
関西地方
(ボタンをクリックする度に追加される)
■ appendChild()メソッド
・(書式)エレメント.appendChild(追加するノード)
・エレメントの子ノードリストの末尾に引数のノードを追加
*任意の位置にノードを追加する場合 ⇒ insertBefore()メソッド
関西地方
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>