본문 바로가기

개발일지/JavaScript + jquery

[jquery] append() 명령어

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <style>
	#baseket{ background:skyblue; padding:10px; }
	#apple{ background:red; padding:5px; }
	#banana{ background:yellow; padding:5px; }
	#orange{ background:orange; padding:5px; }
  </style>
  <script>
	$(function(){
	});
  </script>
 </head>
 <body>
	<div id="baseket">baseket</div>
	<div id="apple">apple</div>
	<div id="banana">banana</div>
	<div id="orange">orange</div>
 </body>
</html>

제이쿼리에 아무 값도 안 준 상태


<변수 선언>

$(function(){
		var baseket = $('#baseket');
		var apple = $('apple');
		var banana = $('banana');
		var orange = $('orange');
	});

변수만 선언했기 때문에 아무 변화가 없다. 값을 쉽게 부르기 위해서 변수 선언을 해준다. 그럼 이름만 불러도 쉽게 적용이 된다.


basket.append(apple);

변수선언 해준 곳 바로 밑에 추가해줬다.

 

basket.append(apple);
basket안에 apple을 첨부하다.

 

basket.append(apple);
basket.append(banana);
basket.append(orange);

세 개 모두 append로 basket안에 추가 해줬다.

 

basket.append(apple, banana, orange);

세 개를 모두 쓰지 않고, 하나 안에 써도 됨!!