- DOM制御: <!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>CSSを操作する１</title>
<!--ここからJavaScript-->
<script>
//ボタンを押すと実行されるfunction
xyz=7;
function addNode(){
xyz=xyz-1;
//追加する子ノードを生成する
var CHILD = document.createElement("p");
//子ノードの属性を指定する。IDをCLDとする
CHILD.setAttribute("id","CLD");
//このノードのタグで囲まれた部分のテキストを設定する
CHILD.innerHTML = "これが"+xyz+"番目に追加されたpタグ領域です";
//どこに追加されるのか、親ノードを指定する
var PARENT = document.getElementById("123");
//これが子ノードを追加する命令 appendChild(CHILD)では書き出しが最後になる
//下式は子ノードの先頭に挿入の意味
//PARENT.insertBefore(CHILD,PARENT.firstChild);
//別方式の挑戦、次に式では(0と1は同じで前に、2と3が同じで後ろに来る
alert(xyz);
PARENT.insertBefore(CHILD,PARENT.childNodes.item(xyz));
//書き出された子ノードにCSSを後付で指定する
//先ずは、getElementByIdを使って追加したノードを抽出する
var CLD = document.getElementById("CLD");
//CSSでcolor:#ff0000;と指定するのと同等
if(xyz==0){
CLD.style.color="#ff0000";
}
if(xyz==1){
CLD.style.color="#ffff00";
}
if(xyz==2){
CLD.style.color="#ffffff";
}
if(xyz==3){
CLD.style.color="#0000ff";
}
if(xyz==4){
CLD.style.color="#00ffff";
}
if(xyz>4){
CLD.style.color="#000000";
}
//CSSを使ってボタンを消す
//document.getElementById("BTN").style.display = "none";
}
</script>
<!--ここまでがJavaScript-->
</head>
<body>
<h1>ノードを追加します</h1>
<!--idを指定する-->
<div id='123'>
<p>１番目のp</p>
<p>２番目のp</p>
<p>３番目のp</p>
<p>４番目のp</p>
</div)
<div>
<p>ここはHTMLで書き出されているテキストです。<br>
ボタンを押すと、この上に赤いテキストが追加されます<br>
ボタンは1回押すと押せなくなります</p>
</div>
<button id="BTN" onClick="addNode();">見出しの下にテキストを追加します</button>
</body>
</html>
2012年5月10日 9:47 PM |
カテゴリー：習作HTML5 |
コメント（0）
