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

试试这个

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

Answer 3

如果你使用jQuery，你可以使用

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

如何将HTML元素/标记替换为容器

3 个答案: