javascript - 在标签之前插入图像并在图像上提供超链接？

Question

我正在使用 gwt。我需要在标签之前给出一个“删除”图像，如下所示。

我如何在文本之前包装图像并提供hyperlink on an image？

Answer 1

可以使用.prepend()and来完成.append()：

$('p').prepend(
    $('<a></a>', { href : "http://google.com" }).append(
        $('<img />',  { src : 'http://placehold.it/30x30' })
    )
);

演示

在这个例子中我有目标<p>元素，所以你显然需要根据你想要定位的元素（例如表格单元格，列表项？）来更改选择器。这样做是首先创建一个图像元素并为其提供源，然后创建一个带有 href 的锚元素，然后将图像附加到锚点，最后将锚点添加到段落元素。

Answer 2

你不需要javascript来做到这一点。我猜CSS会做：

点击小提琴

HTML

<a href="#" class="button"><span>Delete</span></a>

CSS

.button {
    border:1px solid #ccc; 
    padding:5px; 
    background-color:#efefef; 
    width:100px;
    background-image: url(http://www.greenisp.org.uk/x/img/cross-icon-grey.gif);
    background-position: 0 50%;
    background-repeat: no-repeat;
    text-decoration: none;
}

.button span {
    padding-left:25px;
    color:#000;
    font-weight:bold;
}