Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

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

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

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

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

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

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

위를 원복객체라고 하자.

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

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

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

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

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

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

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다