トッカンソフトウェア

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()を実行します。


ページのトップへ戻る