Как заменить HTML элемент/тег в качестве контейнера

Question

Как я могу заменить span

<span id="container"><img src="img.jpg" alt="image" id="content"></span> 

с anchor

<a id="container" href="example.com"><img src="img.jpg" alt="image" id="content"></a> 

Все, что я могу вспомнить, переписав весь документ с помощью document.write метод, который не кажется идеальным.
Примечание: Я ищу простое решение JavaScript, а не jQuery.

Answer 1

Вот функция, я написал для вас:

function linkify(elementId, url) 
{ 
    var element = document.getElementById(elementId), 
     parent = element.parentNode, 
     anchor = document.createElement('a'); 

    anchor.innerHTML = element.innerHTML; 
    anchor.setAttribute('id', elementId); 
    anchor.setAttribute('href', url); 

    parent.replaceChild(anchor, element); 
} 

Вы можете использовать его так:

linkify('container', 'http://example.com'); 

Если вы не хотите, чтобы использовать его как функцию, проверьте revision 1 вместо этого ответа!

Answer 2

если вы используете JQuery, вы можете просто использовать

var contents = $('#container').contents(); 
var anchor = $('<a id="container">').attr('href','example.com').append(contents); 
$('#container').replaceWith(anchor); 

Answer 3

Попробуйте

var mySpan = document.getElementById("container"); 
    var myAnchor = document.createElement("a"); 
    myAnchor.setAttribute("id","container"); 
    myAnchor.setAttribute("href","example.com"); 
    myAnchor.innerHTML = mySpan.innerHTML; 
    mySpan.parentNode.replaceChild(myAnchor,mySpan);