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

Question

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

如何在文字前包装图片并提供hyperlink on an image？

Answer 1

可以使用.prepend()和.append()：

来完成

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

Demo

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

Answer 2

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

CLICK FOR FIDDLE

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