How to create a new anchor tag around an existing element

Question

<span class="classname">
<img src="" width="70" height="70">
</span>

I'm trying to add an anchor tag with a URL around the tags. I'm not sure how to do it and I've been stumped for hours..

Answer 1

Try the jQuery .wrap() method,

$("span.avatar").wrap("<a></a>");

Pure JS:

var target = document.getElementsByClassName("avatar")[0];
var wrap = document.createElement("a");

target.parentNode.replaceChild(wrap, target); 
wrap.appendChild(target);

Answer 2

Try

var el = document.getElementsByClassName('avatar')[0];
var anchor = document.createElement('a');
el.parentNode.insertBefore(anchor, el);
anchor.appendChild(el)

Demo: Fiddle