특정 DOM 요소를 다른 DOM 요소로 제이쿼리를 사용하여 변환하는 방법에 대하여 알아보겠습니다. 이때 사용하는 제이쿼리 메소드는 바로 replaceWith()입니다. 먼저 이 메소드의 간단한 사용방법은 아래와 같습니다.

$(바꾸고 싶은 요소).replaceWith(바뀌게 될 요소);

자세한 설명은 아래 예제와 함께 참고하세요.


! replaceWith() 예제소스 코드보기
<div>
   <p>- 해야할 일 리스트 -</p>
   <span class="item">게임 - <span class="button">진행중</span></span>
   <br />
   <span class="item">웹서핑 - <span class="button">진행중</span></span>
</div>

<script type="text/javascript">
   $(".item .button").click(function() {
      $(this).replaceWith($("<span class="done">완료!</span>"));
   });
</script>

위 코드는 해야될 리스트를 보여주는데 여기서 진행중이란 요소를 클릭하면 완료!로 바뀌게 되는 예제입니다. 해당 코드를 실행하게 되면  기존의 진행중이란 span 태그가 새롭게 생성된 done이란 클래스명의 span태그로 바뀌게 됩니다. 그럼 아래의 진행중 버튼을 눌러보세요.

- 해야할 일 리스트 -

게임 - 진행중

웹서핑 - 진행중

참고로, replaceAll()
이라는 메소드 역시 비슷한 역활로 DOM 요소를 바꿀 수 있습니다. 다만 사용 문법에 차이가 있으며 앞과 뒤를 바꾸어야 합니다. 아래는 간단한 사용방법입니다.

$(바뀌게 될 요소).replaceAll(바꾸고 싶은 요소);