在標籤前插入圖像並在圖像上提供超鏈接？

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

在這個例子中，我有針對性<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; 
}