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");AddP
Botan.type = "button";
Botan.value = " P要素生成 / 削除 ";
Botan.id = "BotanID";
Botan.onclick = ; //onclickで AddPを実行
Frm.appendChild(Botan);
}
else { //チェックが外れたとき ボタンを削除
var Botan = document.getElementById("BotanID");
Botan.parentNode.removeChild(Botan);
}
}
//P要素生成
num = 0;
function () {num ^= 1; //トグルスイッチ 0と1の切り替え ^ 排他的論理和
if(num == 1){ //numが１なら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で変更。
さくらのレンタルサーバ スタンダード
月額１２５円からの「さくらのレンタルサーバ」
ロリポップ！なら初心者でも安心！
ホームページ簡単作成 「ホムペロリ！」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます！！
