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()

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>

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

2 个答案: