이미 html이있는 다른 요소 안에 html 요소를 삽입하는 방법은 무엇입니까?

Question

나는 이와 같은 HTML 구조를 가지고있다.

<ul class="foo"> 
    <li class="bar"> 
     <a href="bar.html">Bar Html</a> 
    </li> 
</ul> 

는 지금은

<ul class="foo"> 
    <li class="bar"> 
      <span class="spanclass"> 
       <a href="bar.html">Bar Html</a> 
      </span> 
    </li> 
</ul> 

으로 jQuery를 사용하여 HTML을 다시 할 그래서 제 질문은, 단순히 있도록 HTML 요소 내부에 HTML 요소를 삽입 할 필요가 I이 사용하는 jQuery를 달성 할 수있는 방법입니다 html의 내용은 새로 삽입 된 html 내부에 있습니다. 나는이

<ul class="foo"> 
    <li class="bar"> 
     <a href="bar.html">Bar Html</a> 
     <ul class="sub foo"> 
      <li class="sub bar"> 
       <a href="sub-bar.html">Sub Bar Html</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

같은 코드를 바꿔 그리고 내 앞의 질문과 같은 결과를 얻고 싶다면

, 그럼 내가 진행하는 방법. 결과는 아래와 같아야합니다.

<ul class="foo"> 
    <li class="bar"> 
     <div class="divclass"> 
      <a href="bar.html">Bar Html</a> 
      <ul class="sub foo"> 
       <li class="sub bar"> 
        <a href="sub-bar.html">Sub Bar Html</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
</ul> 

Answer 1

$('ul.foo li.bar a').wrap('<span class="spanclass">') 

가 생성됩니다

<ul class="foo"> 
    <li class="bar"> 
     <span class="spanclass"><a href="bar.html">Bar Html</a></span> 
    </li> 
</ul> 

jsFiddle example

참조 : .wrap()

Answer 2

WrapInner 방법은 내 질문에 대한 답변입니다.

$('ul.foo li.bar').wrapInner('<div class="divclass">') 

제품에 아래 코드가 사용됩니다.

<ul class="foo"> 
<li class="bar"> 
    <div class="divclass"> 
     <a href="bar.html">Bar Html</a> 
     <ul class="sub foo"> 
      <li class="sub bar"> 
       <a href="sub-bar.html">Sub Bar Html</a> 
      </li> 
     </ul> 
    </div> 
</li>