jquery - 如何在另一个已经有一些 html 的元素中插入 html 元素？

Question

我有一个这样的 html 结构。

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

现在我想使用 jquery 重写 html 为

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

所以我的问题是如何使用 jquery 实现此目的，我只需要在 html 元素中插入一个 html 元素，以便 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()