본문 바로가기
프로그래밍/jQuery

[jquery] DOM 요소 대체 메서드 (replaceAll)

by GenieIT* 2024. 12. 18.
728x90
반응형
728x90
반응형

 

1. replaceAll() 메서드란?

  • replaceAll()은 선택된 DOM 요소를 지정한 새로운 콘텐츠로 대체하는 메서드입니다. 새 콘텐츠가 대체하려는 요소를 "모두" 찾아 교체합니다.

 

 

2. 기본 문법

$(newContent).replaceAll(selector);
  • newContent: 대체할 새 콘텐츠(HTML, 텍스트, 또는 jQuery 객체).
  • selector: 교체 대상이 되는 기존 요소를 선택하는 jQuery 선택자.

 

 

3. 작동 방식

  • replaceAll()은 대상 요소를 찾아서 삭제한 뒤 새 콘텐츠로 대체합니다.
  • 새로 삽입된 콘텐츠는 기존 요소의 위치에 삽입됩니다.

 

 

4. 사용 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
	$(document).ready(function() {
	    $('<p>Replaced Item</p>').replaceAll('li');
	});
  </script>
</head>
<body>
	<ul>
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	</ul>
</body>
</html>

결과 : 

<ul>
    <p>Replaced Item</p>
	<p>Replaced Item</p>
	<p>Replaced Item</p>
</ul>

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

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

[jquery] replaceWith 메서드 사용법과 예제 소스  (128) 2024.12.20
[jquery] 필터링 메서드 .first() .last() .eq() .not()  (75) 2024.12.17
[jquery] 라디오 버튼 체크 여부 확인  (92) 2024.12.17
[jquery] 제이쿼리를 사용하여 class로 값 가져오기  (47) 2024.12.09
[jquery] 제이쿼리를 사용하여 name으로 값 가져오기  (125) 2024.12.09

관련글

GenieIT*님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바