[javascript, Jquery] 요소(Element)를 태그(Html tag)로 감싸기(wrap)

 

여러 가지 이유로 지정한 요소를 특정 태그로 감싸주어야 할 때가 필요합니다.

 

 

1. 제이쿼리(Jquery)를 이용한 방법

제이쿼리는 '.wrap()'함수가 있으므로 쉽습니다.

//$([검색식]).wrap([추가할태그]);
$('.interword').wrap('<li></li>');

 

 

2. 자바스크립트(javascript)를 이용하는 방법

자바스크립트는 살짝 힘듭니다.

요소를 찾아서 넣고 하는 작업이 필요하기 때문이죠 ㅎㅎㅎ

//태그를 추가할 태그를 찾고
var div = document.getElementById('wrapMe');
//태그를 생성하고(여기선 'a')
var link = document.createElement('a');
//기존 태그 내용을 추가해주고
link.innerHTML = div.outerHTML;
//감쌀 태그의 속성을 지정한다.(필요한 경우만)
link.setAttribute('href', '#');
//만든 태그를 부모노드에 추가하고
div.parentNode.insertBefore(link, div);
//기존 검색한 태그를 지워서 완성한다.
div.remove();

 

유틸리티 함수로 만들어두면 편합니다.

 

 

3. 테스트 해보기

아래서 테스트를 해봅시다.

티스토리 문제 때문인지 iframe에서 이상하게 작동하네요-_-;;;

직접 'EDIT ON Code pen'을 눌러 새 창에서 테스트해보시길 바랍니다.

 

 

 

 

마무리

제이쿼리는 이 맛에 쓰는 거 아니겠습니까?

ㅎㅎㅎ