動かす・消す・作る

append/appendTo

  • 要素を動かすためのメソッド
  • ある要素を切り取り、別の要素のなかに付け加える
  • append:付け加える
append
  • 要素Aのなかに要素Bを移動させます
jQueryObjectA.append(jQueryObjectB);


《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="basket">basket</div>
<div id="apple">apple</div>
<div id="banana">banana</div>
<div id="orange">orange</div>
</body>
</html>


《style.css

#basket{
	background:#D9F0AF;
	padding:10px;
}
#apple{
	background:red;
	margin:5px;
}
#banana{
	background:yellow;
	margin:5px;
}
#orange{
	background:orange;
	margin:5px; 
}


《script.js》

$(function(){
	var basket = $('#basket');
	var apple = $('#apple');
	var banana = $('#banana');
	var orange = $('#orange');
	basket.append(apple);
	basket.append(banana);
	basket.append(orange);
});



もともとHTMLでは、すべてのdivはbody要素の直下に配置されていますが、appendメソッドを使い、#apple、#banana、#orangeを#basketのなかに移動させています。


移動後は、次のような構造になります。

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