2011年04月04日

DOM 要素の生成、削除

スポンサード リンク

 createElementメソッド、removeChildメソッド
チェックボックス,ボタン,span要素,p要素生成。


サンプルソース

<html>
 <head>
  <title>要素の生成、削除</title>
<script language="JavaScript">
<!-- //javascript123
window.onload = function() {
 //formの生成
var Frm = document.getElementById("Myfrm"); //要素を表示する場所(親要素)
 var Form = document.createElement("form"); //新規にform要素を生成
  Frm.appendChild(Form); //Frmの子要素としてFormを追加

//input要素 checkbox生成
var Chk = document.createElement("input");
 Chk.type = "checkbox"; //checkboxの生成
  Chk.value = "ch"; //値
   Chk.id = "ChkID"; // id名
    Chk.onclick = Addbtn; //onclickで Addbtnを実行
   Frm.appendChild(Chk); //Frmの子要素としてChkを追加

 //span要素生成
var Spn = document.createElement("span"); //spanタグを生成
  Spn.id="SpnID1"; //id名
var str = document.createTextNode(":ボタンを生成しますか?"); //生成する要素の文字列
   Spn.appendChild(str); //Spnに表示する文字列追加
    Spn.style.color='blue'; //文字の色
    Frm.appendChild(Spn); //Frmの子要素としてSpnを追加
var Br=document.createElement("br"); //改行
    Frm.appendChild(Br); //Frmの子要素としてBrを追加
   }

//input要素 button生成
 function Addbtn() {
  var Frm = document.getElementById("Myfrm");
  var Chk = document.getElementById("ChkID"); //先に生成したチェックボックス
   if(Chk.checked == true){ //チェックが入ったとき ボタンを生成
   
var Botan = document.createElement("input");
   Botan.type = "button";
    Botan.value = " P要素生成 / 削除 ";
     Botan.id = "BotanID";
        Botan.onclick =
AddP;
//onclickで AddPを実行
      Frm.appendChild(Botan);
         }
else { //チェックが外れたとき ボタンを削除
   var Botan = document.getElementById("BotanID");
    Botan.parentNode.removeChild(Botan);

    }
   }

//P要素生成
  num = 0;
function AddP() {num ^= 1; //トグルスイッチ 0と1の切り替え ^ 排他的論理和
 if(num == 1){ //numが1ならP要素を追加
  var elmP = document.createElement("p");
   elmP.id = "pID";
    elmP.innerHTML = "P要素を生成しました。"; //表示する文字列
     elmP.style.backgroundColor = 'cyan'; //背景色
  document.getElementById("Myp").appendChild(elmP);
    }
else { //P要素を削除
 var elmP = document.getElementById("pID");
   elmP.parentNode.removeChild(elmP);}
    }
// -->
</script>
</head>
<body>
  <div id="Myfrm"></div>
   <div id=Myp></div>
</body>
</html>

createElementメソッド
 新規に要素を生成するにはcreateElementメソッドの引数に
タグ名を指定し、属性名とその値を記述します。
 var Botan = document.createElement("input");
   Botan.type = "button";
   Botan.value = " ボタン";
   Botan.id = "BotanID";
     Botan.onclick =AddP;

上記のコードはつぎのHTMLタグを生成します。
<input type="button" value="ボタン" id="BotanID" onclick="AddP()">
変数 Botanはこれらを構成する要素ノードオブジェクトです。
appendChildメソッド
 生成した要素を任意の場所に表示します。
var Frm = document.getElementById("Myfrm");
   Frm.appendChild(Botan);
<body>内の表示したい場所に id属性を振ります。<div id="Myfrm"></div>
これでFrmの子要素として要素ノードオブジェクトBotanを追加表示します。
removeChildメソッド
引数に指定した要素ノードオブジェクトを削除します。
このメソッドは名前のように子要素を削除するメソッドですので
削除対象の要素の親要素が必要になります。
ここではparentNodeプロパティを使って,親要素を参照しています。
var Botan = document.getElementById("BotanID");
    Botan.parentNode.removeChild(Botan);


DOM(Document Object Model)の基本
DOM リンク先とリンク文字をgetAttributeNodeとnodeValueで変更。
さくらのレンタルサーバ スタンダード
月額125円からの「さくらのレンタルサーバ
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!



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

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