jQuery, 객체를 바꿔치기하는 replaceWith() 함수 – 태그 바꿀 때도 사용 가능

2010/01/02

이것도 오늘 사용하다가 메모해야겠다고 생각한 건데, 의외로 많이 사용하는 함수다. 그런데 설명돼 있는 곳은 잘 없는 함수다.

예컨대, <p>인 객체를 <h2>로 바꾸고 싶다면?

감싸는 건 .wrap(‘h2’)라고 하면 된다. 그럼 바꿔치기는 어떻게 할까?

일단 객체가 필요하다. 그리고 바꿔치기할 객체도 필요하다.

<p id="원본">원본객체의 텍스트</p>

위를 원복객체라고 하자.

그리고 js 코드는 이렇다고 하자.

var 새객체="<h2 id='새객체'>새객체의 텍스트</h2>";
$('#원본').replaceWith(새객체);

위 코드처럼 하면 원본객체가 새객체로 바뀐다.

원본객체의 텍스트를 유지하고 싶다면 아래처럼 쓰면 된다.

var 원본텍스트 = $('#원본').text();
var 새객체="<h2 id='새객체'>"+ 원본텍스트 +"</h2>";
$('#원본').replaceWith(새객체);

이러면 당연히 원본텍스트가 유지되면서 태그만 교체될 것이다.

15년차 풀스택 웹 개발자 안형우입니다

웹 개발에서도 중요한 것은 개념입니다.
이 블로그에는 제가 개발하며 익힌 개념들을 정리합니다.

워드프레스를 개발자 입장에서 다루는 데 오랜 시간을 써 왔습니다.
인프런 강의 “워드프레스 제대로 개발하기 어드민 편, 클라이언트 편” 지식 공유자입니다.

OOCSS에서 Utility-First CSS까지, CSS를 효과적으로 관리하는 데 관심이 많았습니다.
“프로젝트 중심 실전 CSS”라는 제목으로 관련 강의를 유튜브에 연재중입니다.

형우의 웹개발