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要素が出力される