jQuery 입문 | 요소의 조작 | 요소의 대체 .replaceAll() .replaceWith()

요소의 대체

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체할 수 있다.

.replaceAll() 메소드

.replaceAll() 메소드는 선택한 요소를 지정된 요소로 대체한다.
이 메소드는 인수로 선택자나 jQuery 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.

$(source).replaceWith(target);

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>
<p>반갑습니다.</p>

요소를 생성해서 다른 요소를 그 요소로 대체할 수 있다.

$("<div>devkuma입니다.</div>").replaceAll("p");

또는 객체를 다른 요소를 그 객체의 요소로 대체할 수 있다.

$("#two").replaceAll($("#one"));

코드 실행

.replaceWith() 메소드

.replaceWith() 메소드는 선택한 요소를 지정된 요소로 대체한다.
이 메소드는 인수로 HTML 코드 형식의 문자열이나 jQuery 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.
또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있다.

$(target).replaceWith(source);

.replaceWith() 메소드의 동작은 .replaceAll() 메소드와 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대이다.
또한, .replaceWith() 메소드는 지정된 요소로 대체되어 제거된 기존 요소를 반환한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>
<p>반갑습니다.</p>

요소를 생성해서 다른 요소를 그 요소로 대체할 수 있다.

$("p").replaceWith("<div>devkuma입니다.</div>");

또는 객체를 다른 요소를 그 객체의 요소로 대체할 수 있다.

$("#one").replaceAll($("#two"));

코드 실행

.replaceAll() 메소드와 .replaceWith() 메소드는 제거된 요소와 관련된 모든 데이터와 이벤트 핸들러도 같이 제거한다.