Question

我有一个图像链接，我想变成图像和文本链接。

有这个：

<a href="http://example.com/" class="link">  
  <img src="http://i.imgur.com/s3zp1u2.jpg" /></a>

我想得到这个（注意'猫'文字）：

<a href="http://example.com/" class="link">  
  <img src="http://i.imgur.com/s3zp1u2.jpg" />Cat</a>

我的code添加了文字但删除了图片：

$(function(){
    $('.link').text('Cat');
});

Answer 1

最简单的是添加额外的跨度

<a href="http://example.com/" class="link">  
  <img src="http://i.imgur.com/s3zp1u2.jpg" />
  <span></span>
</a>

JS

$(function(){
    $('.link span').text('Cat');
});

另一种方法是使用append()

Answer 2

使用append代替text。

$(function(){
    $('.link').append('Cat');
});

http://jsfiddle.net/0g8yuq0o/1/

Answer 3

一种方式：

$(function(){
    $('.link').append('Cat');
});

Answer 4

对于已经建议的内容，我只能添加纯Javascript解决方案：

<a href="http://example.com/" class="link">  
  <img src="http://i.imgur.com/s3zp1u2.jpg" />
  <span id="cat-001-text">Cat</span>
</a>

<script type="text/javascript">
    document.getElementById("cat-001-text").innerHTML = "dog";
</script>

如何添加文本以锚定图像？

4 个答案: