728x90
반응형
728x90
목 차
반응형
1. replaceWith() 메서드란?
- replaceWith()는 jQuery를 사용하여 선택한 DOM 요소를 새 콘텐츠로 대체하는 메서드입니다. 대체 작업 후 기존 요소는 DOM에서 제거되고, 새 콘텐츠가 기존 요소의 위치를 차지합니다.
2. 기본 문법
$(selector).replaceWith(newContent);- selector: 대체할 대상 요소를 선택.
- newContent: 대체할 새 HTML, 텍스트, DOM 요소, 또는 jQuery 객체.
3. 작동 방식
- replaceWith()는 선택된 요소를 DOM에서 제거하고, 새 콘텐츠로 교체합니다.
- 새 콘텐츠는 교체된 요소와 동일한 위치에 삽입됩니다.
4. 사용 예제
4-1. 단일 요소 대체
<div id="oldDiv">Old Content</div>$('#oldDiv').replaceWith('<p>New Content</p>');결과 :
<p>New Content</p>
4-2. 여러 요소 대체
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>$('li').replaceWith('<p>Replaced Item</p>');결과 :
<p>Replaced Item</p>
<p>Replaced Item</p>
<p>Replaced Item</p>
4-3. 기존 요소를 새 콘텐츠로 대체
<div class="replace-me">Replace me</div>
<div class="replace-me">Replace me too</div>$('.replace-me').replaceWith(function() {
return `<p>New content for ${$(this).text()}</p>`;
});결과 :
<p>New content for Replace me</p>
<p>New content for Replace me too</p>
4-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() {
$('#username').replaceWith('<input type="text" id="username" value="New Value">');
});
</script>
</head>
<body>
<input type="text" id="username" value="Old Value">
</body>
</html>
4-5. 경고 메세지 업데이트
<!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() {
$('.alert').replaceWith('<div class="alert">This is a new message!</div>');
});
</script>
</head>
<body>
<div class="alert">This is an old message.</div>
</body>
</html>
5. 주의 사항
- replaceWith()를 사용하면 교체된 요소에 바인딩된 이벤트 핸들러와 데이터는 새로 생성된 요소로 이전되지 않습니다.
<div id="example">Click me</div>$('#example').on('click', function() {
alert('Clicked!');
});
$('#example').replaceWith('<p id="example">Replaced!</p>');
// 새로 생성된 <p> 요소는 클릭 이벤트가 바인딩되지 않음해결 방법 :
1) 이벤트 위임 사용 :
$(document).on('click', '#example', function() {
alert('Clicked!');
});2) 이벤트 재바인딩 :
const newElement = $('<p id="example">Replaced!</p>');
newElement.on('click', function() {
alert('Clicked!');
});
$('#example').replaceWith(newElement);
관련글
728x90
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jquery] DOM 요소 대체 메서드 (replaceAll) (89) | 2024.12.18 |
|---|---|
| [jquery] 필터링 메서드 .first() .last() .eq() .not() (73) | 2024.12.17 |
| [jquery] 라디오 버튼 체크 여부 확인 (88) | 2024.12.17 |
| [jquery] 제이쿼리를 사용하여 class로 값 가져오기 (44) | 2024.12.09 |
| [jquery] 제이쿼리를 사용하여 name으로 값 가져오기 (125) | 2024.12.09 |