SeouliteLab

jQuery의 .appendTo() 메서드를 활용한 요소 삽입 본문

프로그래밍

jQuery의 .appendTo() 메서드를 활용한 요소 삽입

Seoulite Lab 2024. 4. 5. 10:07

jQuery에서 제공하는 .appendTo() 메서드는 선택한 요소를 지정한 다른 요소 내부에 추가하는 기능을 제공합니다. 이를 통해 동적으로 DOM을 조작하고 원하는 위치에 요소를 삽입할 수 있습니다. 아래는 .appendTo() 메서드를 사용한 다양한 예제와 설명입니다.

예제 1: 기본적인 사용법

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .appendTo() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="container">
  <p>기존 요소</p>
</div>

<script>
$(document).ready(function(){
  $("<span>추가된 요소</span>").appendTo("#container");
});
</script>

</body>
</html>

출력 결과:

<div id="container">
  <p>기존 요소</p>
  <span>추가된 요소</span>
</div>

설명:

  • #container 요소 내에 새로운 <span> 요소가 추가됩니다.

예제 2: 여러 개의 요소 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .appendTo() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="container">
  <p>기존 요소</p>
</div>

<script>
$(document).ready(function(){
  $("<span>추가된 요소1</span><span>추가된 요소2</span><span>추가된 요소3</span>").appendTo("#container");
});
</script>

</body>
</html>

출력 결과:

<div id="container">
  <p>기존 요소</p>
  <span>추가된 요소1</span>
  <span>추가된 요소2</span>
  <span>추가된 요소3</span>
</div>

설명:

  • #container 요소 내에 여러 개의 <span> 요소가 추가됩니다.

예제 3: 이미 존재하는 요소 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .appendTo() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="container">
  <p>기존 요소</p>
</div>
<span id="newElement">새로운 요소</span>

<script>
$(document).ready(function(){
  $("#newElement").appendTo("#container");
});
</script>

</body>
</html>

출력 결과:

<div id="container">
  <p>기존 요소</p>
  <span id="newElement">새로운 요소</span>
</div>

설명:

  • 이미 존재하는 #newElement 요소가 #container 요소 내에 추가됩니다.

예제 4: 함수를 사용한 동적 요소 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .appendTo() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="container">
  <p>기존 요소</p>
</div>

<script>
$(document).ready(function(){
  $("<span>동적으로 추가된 요소</span>").appendTo("#container");
});
</script>

</body>
</html>

출력 결과:

<div id="container">
  <p>기존 요소</p>
  <span>동적으로 추가된 요소</span>
</div>

설명:

  • 함수를 사용하여 동적으로 <span> 요소를 생성하고 #container 요소 내에 추가합니다.

예제 5: 선택한 요소들 모두에 대한 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .appendTo() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<p>첫 번째 요소</p>
<p>두 번째 요소</p>

<div id="container">
  <p>기존 요소</p>
</div>

<script>
$(document).ready(function(){
  $("p").appendTo("#container");
});
</script>

</body>
</html>

출력 결과:

<div id="container">
  <p>기존 요소</p>
  <p>첫 번째 요소</p>
  <p>두 번째 요소</p>
</div>

설명:

  • 모든 <p> 요소가 #container 요소 내에 추가됩니다.
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .clone() 메서드를 활용한 요소 복제  (0) 2024.04.05
jQuery의 .before() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .after() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .pushStack() 메소드: 요소 스택 조작하기  (0) 2024.04.05
jQuery의 .serializeArray() 메소드: 폼 데이터 배열로 직렬화하기  (0) 2024.04.05
'프로그래밍' Related Articles more