Question

I have some html:

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

I want to put an <a href> around the Text.

So I have some javascript:

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

But the result is that I get:

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

The funny thing is, if I just used ‘New Text’ instead of the , I get the following:

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

Any idea why changes this?

Answer 1

you can use wrapInner method:

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

http://jsfiddle.net/Fz3As/

Note that there is a syntax error in your prepend method and you cannot pass a </a> to those methods for adding a closing tag. This is not the proper usage of those methods.