2013年12月06日

appendChild()メソッド DOM 要素の移動 (追加、削除)

スポンサード リンク

 appendChild(child)メソッド
'child' ノードを 元の場所から、新しい位置に移動します。


さあ これをどのように活用しましょうか? 上に流れるテロップでも 作ってみますか.....

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>appendChild()メソッド DOM 要素の移動 (追加、削除)</title>
 <style type="text/css">
  <!--
#ticKer{
    border: 1px solid gray; /* ボーダー : 幅,線種,色 */
    border-radius: 12px; /* 角丸ボーダー */
    width: 500px;  /* 横幅 */
    background:linear-gradient(white, #eaeaec); /* 色の線形グラデーション */
	 }
#ticKer ul{
    padding-left: 30px; /* 内側余白 左 */
    margin: 0 auto; 
	 }
 #ticKer li{
   list-style-type: none; /* リストマーク なし */
   padding: 7px;
   padding-left: 30px;
   color: blue;
   font-weight: bold;
   font-size: 16px;
	}
#ticKer li span{
  font-weight: bold;
  color:red;
      }
-->
</style>
<script>
 <!--//javascript123
       // Li要素 追加,削除
function cngLi(){
 var element= document.getElementById("ulArea"); // 親ノード
 var liList = element.getElementsByTagName("li"); // "li"要素を参照
 var child = liList[0]; // 追加するノード, 最初のリスト項目 "li" 
  element.appendChild(child); // 子ノードとして末尾に追加するメソッド
       }

     // 一行表示切替
   var num = 0;
   var divHeight=35;
 function cngDsp(){ num ^= 1; // //トグルスイッチ 0と1の切り替え ^ 排他的論理和
  if(num == 1){var scroller = document.getElementById("ticKer");
    scroller.style.overflow = "hidden";
     scroller.style.height= divHeight+"px";
           }
   else { scroller = document.getElementById("ticKer");
           scroller.style.overflow = "show";
            scroller.style.height="";
              }
        }
  -->
</script>
</head>
<body>
  <div id="ticKer">
   <ul id="ulArea">
    <li><span>1 </span><a href="#">DOM(Document Object Model)</a></li>
    <li><span>2 </span><a href="#">動く文字 ティッカー 電光掲示板</a></li>
    <li><span>3 </span><a href="#">Javascript 構文 関数 ステートメント</a></li>
    <li><span>4 </span><a href="#">日付 時刻 時計</a></li>
    <li><span>5 </span><a href="#">レンタル サーバー</a></li>
 </ul>
</div>
<p>
<button onclick="cngLi()" style="margin-left : 50px;">要素の移動</button>
<button onclick="cngDsp()" style="margin-left : 50px;">一行表示 / 解除</button>
</p>
</body>
</html>
element.appendChild(child)メソッド
 element.appendChild(child)は、「element」に指定した親要素の子ノードリストの末尾に
引数「child」に指定したノードを追加するメソッドです。
追加するノード(child)が既にHTML文書内に存在しているノードであれば、指定した位置に追加され
元の場所にあったノードはremoveChild()する必要もなく削除されます。
-追加、削除- で 実質 移動した事になります。
上記サンプルでは一番上のリスト項目にappendChild(child) を指定しているので
ボタンを押すたびに末尾に移動し、二行目が上に繰り上がります。


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

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