jQuery .append和.prepend问题

时间:2012-12-01 23:07:47

标签: jquery html append prepend

我有一些HTML:

<div class="sample">
  <span>
    Text
  </span>
</div>

我想在文本周围添加<a href>

所以我有一些javascript:

$(".sample span").prepend("<a href='http://www.example.com" target='_blank'>");
$(".sample span").append("</a>");

但结果是我得到了:

<div class="sample">
  <span>
    <a href='http://www.example.com' target='_blank'></a>
    Text
  </span>
</div>

有趣的是,如果我只使用“新文本”代替,我会得到以下内容:

<div class="sample">
  <span>
    New Text
    Text
    New Text
  </span>
</div>

知道为什么会改变这个?

3 个答案:

答案 0 :(得分:3)

您可以使用wrapInner方法:

$(".sample span")
    .wrapInner("<a href='http://www.example.com' target='_blank'></a>");

http://jsfiddle.net/Fz3As/

请注意,prepend方法存在语法错误,您无法将</a>传递给那些添加结束标记的方法。这不是这些方法的正确用法。

答案 1 :(得分:2)

您可以使用wrap()方法

$(".sample span").wrap("<a href='http://www.example.com' target='_blank'></a>");

API参考:http://api.jquery.com/wrap/

答案 2 :(得分:0)

试试这个

var prepend = "<a href='http://www.example.com' target='_blank'>";
var append  = "</a>";
$(".sample span").html(prepend + $(".sample span").html() + append);