「jqueryで要素の追加のサンプル」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryで要素の追加のサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jqueryで要素の追加のサンプル</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style type="text/css">
.addBox {
padding:1em;
background:#ccc;
}
#targetBox {
padding:1em;
border:1px solid #333;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(event) {
$(".addBox").remove();
var val = $(event)[0].target.value;
var add = $(this).parents("div#targetBox");
if (val == "before") {
add.before('<div class="addBox">before()だとココに追加される</div>');
}
else if (val == "prepend") {
add.prepend('<div class="addBox">prepend()だとココに追加される</div>');
}
else if (val == "append") {
add.append('<div class="addBox">append()だとココに追加される</div>');
}
else if (val == "after") {
add.after('<div class="addBox">after()だとココに追加される</div>');
}
});
});
</script>
</head>
<body>
<h1>jqueryで要素の追加のサンプル</h1>
<div id="targetBox">
このdivタグの上とか下とかに要素を追加する<br />
<button value="before"><div>の上：before()</button>
<button value="prepend"><div>の下：prepend()</button>
<button value="append"></div>の上：append()</button>
<button value="after"></div>の下：after()</button>
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>