Js: getElementById

Question

我有一个这样的图片列表：

<div id="imgSorce">
    <a href="#"><img src="images/img1.png"/></a>
    <a href="#"><img src='images/img2.png'/></a>
</div>
<div id="imgResult"></div>

我希望当我单击其中任何一个时，能够将图像插入到div标记中。

function myFunction() {
    document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}

谢谢

Answer 1

在使用jquery进行标记时，您可以执行以下操作：

1. 在单击的<img>中查找<a>。It's $(this).children('img')
2. Clone it.这是.clone()
3. Before把图片移到#imgResult，清除里面的所有东西。$('#imgResult').empty()

编辑:如果图像需要保留，不要执行步骤3，这意味着将$('#imageResult').empty()替换为简单的$('#imageResult')

1. 将克隆的映像放入#imageResult。我是.appendTo($('#imgResult'))

​

$('a').click(function() {
   $(this).children('img').clone().appendTo($('#imgResult'));
});

img {
max-width: 300px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgSorce">
    <a href="#"><img src="https://i.imgur.com/cWCw1q2.jpg"/></a>
    <a href="#"><img src='https://i.imgur.com/4EiQldb.jpg'/></a>
</div>
<div id="imgResult"></div>

​

Answer 2

您可以使用jQuery完成此操作：

jQuery('a').on('click', function(){
    var pic = jQuery(this).html();
    jQuery('#imgResult').html(pic);
});

https://jsfiddle.net/1o4ngjnc/

Answer 3

通过使用onClick尝试这样做。

​

function myFunction() {
    document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="imgSorce">
    <a href="#" onClick="myFunction()"><img src="images/img1.png"/></a>
    <a href="#"onClick="myFunction()"><img src='images/img2.png'/></a>
</div>
<div id="imgResult"></div>

​