SeouliteLab

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

프로그래밍

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

Seoulite Lab 2024. 4. 5. 10:08

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

예제 1: 기본적인 사용법

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

<p>기존 요소</p>

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

</body>
</html>

출력 결과:

<span>추가된 요소</span>
<p>기존 요소</p>

설명:

  • <span> 요소가 <p> 요소의 이전 형제로 추가됩니다.

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

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

<p>기존 요소</p>

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

</body>
</html>

출력 결과:

<span>추가된 요소1</span>
<span>추가된 요소2</span>
<span>추가된 요소3</span>
<p>기존 요소</p>

설명:

  • 여러 개의 <span> 요소가 <p> 요소의 이전 형제로 추가됩니다.

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

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

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

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

</body>
</html>

출력 결과:

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

설명:

  • 이미 존재하는 #newElement 요소가 <p> 요소의 이전 형제로 추가됩니다.

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

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

<p>기존 요소</p>

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

</body>
</html>

출력 결과:

<span>동적으로 추가된 요소</span>
<p>기존 요소</p>

설명:

  • 함수를 사용하여 동적으로 <span> 요소를 생성하고 <p> 요소의 이전 형제로 추가합니다.

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

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

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

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

</body>
</html>

출력 결과:

<span>추가된 요소</span>
<p>첫 번째 요소</p>
<span>추가된 요소</span>
<p>두 번째 요소</p>
<span>추가된 요소</span>
<p>세 번째 요소</p>

설명:

  • 모든 <p> 요소의 이전 형제로 <span> 요소가 추가됩니다.
저작자표시 비영리 변경금지

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

jQuery의 .detach() 메서드를 활용한 요소 제거  (0) 2024.04.05
jQuery의 .clone() 메서드를 활용한 요소 복제  (0) 2024.04.05
jQuery의 .appendTo() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .after() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .pushStack() 메소드: 요소 스택 조작하기  (0) 2024.04.05
'프로그래밍' Related Articles more