javascript - 如何在html中的img标签中添加 anchor 标签？

Question

我想在 html 的 img 标签内包含 anchor 标签。

<img src="img.jpg" alt="no img" />

其中我想包括:

<a onclick="retake();" > Retake </a>

实际上，通过单击“重拍”，我想为该照片拍摄另一张照片。

如何包含内部img？有什么帮助吗？

Answer 1

img 元素不能包含任何其他内容，无论是 HTML 元素还是文本节点。最接近的方法是用 a 包装 img:

<a onclick="retake();"> Retake <img src="img.jpg" alt="no img" /></a>

尽管可以用另一个元素(例如 span)包装 img，并将 a 作为同级元素:

<span>
    <img src="img.jpg" alt="no img" />
    <a onclick="retake();"> Retake </a>
</span>

并使用 CSS 将其定位在元素上方(因此在视觉上是“内部”):

span {
    position: relative;
}
span a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JS Fiddle demo .