2013年11月16日

appendChild() メソッド

スポンサード リンク

 element.appendChild(appendNode) DOM,ノードを追加するメソッド 。

element.appendChild(appendNode)は、「element」に指定した親要素の子ノードリストの末尾に
引数「appendNode」に指定したノードを追加するメソッドです。
 

県を選択して、appendChild() ボタンを押してください。

  1. 既存のテキスト

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★

サンプルソース

      <!--動作に不必要な スタイルシート属性などは省略-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>appendChildメソッド</title>
<script type="text/javascript">
<!--
function Append(){
  var opt = document.getElementById("selc");
   var indexNum = opt.selectedIndex; // 選択アイテムのインデックス番号
   var optVal=opt.options[indexNum].value; // 選択アイテムの値(文字列)を取得
   var textNode = document.createTextNode(optVal); // 文字列からテキストノードを生成
   var newLi = document.createElement("li"); // HTMLタグ <li>要素ノードを生成
   newLi.appendChild(textNode); // <li>ノードにテキストノードを付加
    var parElm = document.getElementById("OL"); // 親要素ノード
     parElm.appendChild(newLi); // 生成されたノードを末尾に追加
    }

function Remove(){
   var parElm = document.getElementById("OL"); // 親要素ノード
   var list = parElm.getElementsByTagName('li');// <li>要素ノード
     if(list.length<=1){return;} // list.length <li>要素の数。一行目だけ残す
	parElm.removeChild(parElm.lastChild);	// 子ノードを末尾から削除
         }
 // -->
 </script>
 </head>
 <body>
 <form>
  <select id="selc" size="5">   <!--セレクトメニュー-->
     <option value="岡山県" selected="true">岡山県</option>  
     <option value="広島県">広島県</option>  
     <option value="鳥取県">鳥取県</option>  
     <option value="島根県">島根県</option>  
     <option value="山口県">山口県</option> 
  </select>
 <input type="button" value="appendChild()" onclick="Append()">
 <input type="button" value="removeChild()" onclick="Remove()"> 
</form>

  <ol id="OL">   <!--箇条書き,リスト-->
   <li>既存のテキスト</li>
  </ol>
</body>
</html>
appendChildメソッド 実行のポイント
 <ol id="OL"> 
  <li>既存のテキスト</li>
 </ol>
 var textNode = document.createTextNode("選択した県名"); // テキストノードを生成
   var newLi = document.createElement("li"); // <li>要素ノードを生成 要素の生成
   newLi.appendChild(textNode); // <li>要素にテキストノードを付加
    var parElm = document.getElementById("OL"); // 親要素ノード
     parElm.appendChild(newLi); // 生成されたノードを末尾に追加
  body
      └─ ol ( id="OL" ) // parElm,親ノード
           ├─ li ( <li>既存のテキスト</li> ) // 子ノード
           └──── newLi ( <li>選択した県名</li> ) // 追加した,子ノード
element.removeChild(child)メソッド
  削除対象の要素の親要素を「element」に指定します。
引数「child」に指定した要素ノードを削除します。
var parElm = document.getElementById("OL");// 親要素ノード
    parElm.removeChild(parElm.lastChild);// 最後の子ノードを削除


posted by javaScript at 16:49 | 大阪 ☀ | DOM | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。