JavaScript 画面操作
今回は画面操作をやります。innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
document.getElementById( "id2" ).onclick = function(){
document.getElementById("id1").innerHTML = "World!!";
};
},false);
</script>
</head>
<body>
<div id="id1">Hello</div>
<input type="button" name="name2" id="id2" value="ボタン" />
</body>
</html>
innerHTMLを使うとタグの中身を書き換えられます。
→ 
ボタン押下後は以下のようなHTMLになります。
<body>
<div id="id1">World!!</div>
<input type="button" name="name2" id="id2" value="ボタン">
</body>
createElement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
document.getElementById( "id2" ).onclick = function(){
if(document.getElementById("id3")){
return;
}
var e1 = document.createElement("input");
e1.id = "id3";
e1.type = "button";
e1.value = "Newボタン";
e1.onclick = function(){
var txt = document.createTextNode("World!!");
var e2 = document.createElement("div");
e2.id = "id4";
e2.appendChild(txt);
document.getElementById("id1").insertBefore(e2, e1);
};
document.getElementById("id1").appendChild(e1);
};
},false);
</script>
</head>
<body>
<div id="id1">Hello</div>
<input type="button" name="name1" id="id2" value="ボタン" />
</body>
</html>
→ 
→ 
document.createElement で要素を作成し、appendChild または insertBefore でページに貼り付けます。
document.createTextNode は要素間のテキストを設定できます。
ボタン押下 → Newボタン押下 で以下のようなHTMLになります。
<body>
<div id="id1">Hello
<div id="id4">World!!</div>
<input id="id3" type="button" value="Newボタン">
</div>
<input type="button" name="name1" id="id2" value="ボタン">
</body>
以下のイメージです。
<親></親>
↓
親.appendChild(子);
↓
<親>子</親>
↓
親.insertBefore(新, 子);
↓
<親>新 子</親>
remove
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("id2").onclick = function () {
document.getElementById("id1").remove();
};
}, false);
//IEの場合、以下が必要
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function () {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
</script>
</head>
<body>
<div id="id1">Hello</div>
<input type="button" name="name1" id="id2" value="ボタン" />
</body>
</html>
要素を消す場合、remove()を実行します。
→ 
ページのトップへ戻る