jQueryオブジェクト１２

jQuery 授業



要素を移動する1 - append



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を移動する1 - append</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body {
background-color: #FCF;
}

#basket {
width: 400px;
height: 300px;
background-color: #FF9;
}

#apple {
width: 300px;
height: 100px;
background-color: #CFC;
}

#banana {
width: 300px;
height: 100px;
background-color: #9FC;
}

#orange {
width: 300px;
height: 100px;
background-color: #699;
}

</style>
</head>
<body>

<div id="basket">basket</div>
<div id="apple">apple</div>
<div id="banana">banana</div>
<div id="orange">orange</div>

<script>
$(function() {
var basket = $('#basket');
var apple = $('#apple');
var banana = $('#banana');
var orange = $('#orange');
basket.append(apple);
basket.append(banana);
basket.append(orange);
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】

  • 移動前

  • 移動後