如何将<img>元素插入<a>元素

Question

我试图在超链接标记内插入图像。

当前的标记：

<div class="Example"> 
    <a href="http://www.Example.com"> 
    <img src="http://www.Example.com/Sloth.jpg"> 
    </a> 
</div> 

我想插入

<img class="example" src="http://www.Example.com/JellyFish.jpg"> 

所以标记如下：

<div class="Example"> 
    <a href="http://www.Example.com"> 
    <img src="http://www.Example.com/Sloth.jpg"> 
    <img class="example" src="http://www.Example.com/JellyFish.jpg"> 
    </a> 
</div> 

问题

我怎样才能通过Javascript或JQuery做到这一点？

Answer 1

要追加图像的解决方案可以是：

$('.Example a').append($('<img>', {class: 'example', src: 'http://www.Example.com/JellyFish.jpg'})); 

的片段：

$(function() { 
 
    $('.Example a').append($('<img>', 
 
          {class: 'example', src: 'http://www.Example.com/JellyFish.jpg'})); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="Example"> 
 
    <a href="http://www.Example.com"> 
 
     <img src="http://www.Example.com/Sloth.jpg"> 
 
    </a> 
 
</div>

Answer 2

使用jQuery append() ...

$("a").append('<img class="example" src="http://www.Example.com/JellyFish.jpg">'); 

Answer 3

你可以使用insertAfter：

$('<img class="example" src="http://www.Example.com/JellyFish.jpg">').insertAfter('.Example img'); 

希望这有助于。

$('<img class="example" src="http://www.Example.com/JellyFish.jpg">').insertAfter('.Example img');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Example"> 
 
    <a href="http://www.Example.com"> 
 
    <img src="http://www.Example.com/Sloth.jpg"> 
 
    </a> 
 
</div>

Answer 4

使用.append（）以将元件插入<a>。请注意，我使用包含.Example作为选择器的一部分来确保特异性。

$(document).ready(function(){ 
 
    $('.Example a').append('<img class="example" src="http://www.Example.com/JellyFish.jpg">') 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Example"> 
 
<a href="http://www.Example.com"> 
 
    <img src="http://www.Example.com/Sloth.jpg"> 
 
</a> 
 
</div>