动态添加图片链接

Posted 2023-03-05

【中文标题】动态添加图片链接

【英文标题】：Add link to image dynamically

【发布时间】：2011-01-24 21:45:20

【问题描述】：

如果我有“img”元素 id =“myimg”。 可以在不使用 jQuery 编辑 html 页面的情况下添加指向“img”的链接

<img id="myimg" src="image.png">

我喜欢让“myimg”有这样的链接。

<a href="test.html"><img id="myimg" src="image.png"></a>

【参考方案1】：

我不喜欢 jQuery。使用 javascript，您可以执行以下操作：

var parentEl = document.getElementById("myimg").parentElement;
var imgEl = parentEl.innerHtml;
parentEl.innerHtml = '<a href="test.html">' + imgEl + '</a>';

【讨论】：

如果图像已经存在，我们如何删除链接，即 标签。

@SamyagShah：您可以使用正则表达式评估器并将锚点替换为 '' 以删除锚点。这应该很简单。

感谢您的回答。但是还有其他方法吗，即使用诸如 removeChild 等 javascript 函数。

这应该作为一个单独的问题发布。这可能会帮助其他用户，而不是在这里获得它。

【参考方案2】：

$(document).ready(function() 
        var src = "linkhere.html";
        var a = $("<a/>").attr("href", src);
        $("#myimg").wrap(a);
);

【讨论】：

wrap 正在做我尝试使用 javascript 实现的目标。绝对 +1

【参考方案3】：

你可以使用wrap():

$("#myimg").wrap("<a href='test.html'></a>');

或

$("#myimg").wrap($("<a>").attr("href", "test.html"));

或：

var a = $("<a>").attr("href", "test.html");
$("#myimg").wrap(a);