[JQuery] 요소 바꾸기, 교체 replaceAll, replaceWith

JQuert에서는 요소를 다른걸로 바꿀수 있는 메서드를 제공합니다

 

replaceAll : 선택한 요소를 지정된 요소로 대체합니다

replaceWith : 선택한 모든 요소를 지정된 요소로 대체합니다

 

replaceAll

이 메소드는 인수로 선택자나 jQuery 객체, HTML DOM 요소, 배열 등을 전달받을 수 있습니다

<p>안녕하세요</p>

$("<p>ITSkeleton</p>").replaceAll("p");

이렇게 한다면 <p>안녕하세요</p>가 <p>ITSkeleton</p>로 변경됩니다. All이기때문에 p로 작성된 다른게 있다면 모두 변경됩니다.

정리: .replaceAll을 기준으로 오른쪽값을 왼쪽값으로 교체

 

replaceWith

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

 

위의 코드가 앞뒤가 바뀌었다고 생각하면 편합니다

$("p").replaceWith("<p>ITSkeleton</p>");

 

* 요소를 바꾸게 되면 해당 요소에 있는 모든 정보값, 이벤트 핸들러가 모두 삭제됩니다. 참고하셔야합니다