20140301【JS】jQueryで子要素を追加する

お題

jQueryで子要素を追加する

プログラム概要

ボタンを押すとそれに応じてli要素を追加する

ソース


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hoge</title>
<script src="jquery-1.11.0.js"></script>
<body>
<h1>子要素の追加</h1>

<input type="button" id="append" value="append"/>
<input type="button" id="prepend" value="prepend"/>
<input type="button" id="appendTo" value="appendTo"/>
<input type="button" id="prependTo" value="prependTo"/>

<ul></ul>
<script>
$(function(){
    $('#append').click(function(){
		$('ul').append($('<li>末尾に追加</li>'));
	});
	$('#prepend').click(function(){
		$('ul').prepend($('<li>先頭に追加</li>'));
	});
	$('#appendTo').click(function(){
		$('<li>末尾に追加</li>').appendTo($('ul'));
	});
	$('#prependTo').click(function(){
		$('<li>先頭に追加</li>').prependTo($('ul'));
	});
});
</script>
</body>
</html>

実行結果

 

左から順にボタンを押下していくと

下記のようにli要素が出力される

f:id:mocomei:20140301170817p:plain