<div id="wrapMe">링크로 감싸 주세요~</div>
<br />
<span class="interword">전 li로 ^^</span>
<br />
<br />
<input type="button" value="Div를 링크로 감싸기" onclick="wrapLink()">
<br />
<br />
<input type="button" value="span을 li로 감싸기" onclick="wrapLi()">
function wrapLink() {
  //태그를 추가할 태그를 찾고
  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();
}

function wrapLi() {
  $('.interword').wrap('<li></li>');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js