【JavaScript】appendChildでHTMLの要素を追加する

HTMLにinnerHTMLで文字列を出力する場合、
出力の度に前回の出力を書き換えてしまう。

前回の出力分を残した状態で、新たに要素を追加する場合は、appendChildを利用する。

appendChildでボタンを押すたびにHTMLの要素を追加するサンプルコード

<html>
<head>
<title>appendChildでHTMLの要素を追加するサンプルコード</title>
</head>
<style type="text/css">
.className {
	background-color: #000000;
	color: #FFFFFF;
}
</style>
<body>
	<!--appendChild要素追加サンプル-->
	<script type="text/javascript">
		function addElement() {
			var element = document.createElement('div');
			element.setAttribute('class', 'className');
			element.innerHTML = "テキスト";
		
			var objBody = document.getElementsByTagName("body").item(0);
			objBody.appendChild(element);
		}
	</script>
	
	<!--要素追加ボタン-->
	<form>
		<input type="button" value="要素を追加" onClick="addElement()">
	</form>
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>