Js: getElementById

Question

I have a list of image like this:

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

I want to be able to insert the images to a div tag when I click on any of them.

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

Thanks

Answer 1

As you tag with jquery, you can do like below:

1. Find the <img> inside the clicked <a> . It's $(this).children('img')

2. Clone it. It's .clone()

3. Before move the picture to #imgResult , clear anything inside it. $('#imgResult').empty()

Edited: If image needs to stay, don't do the step 3, which means replace $('#imageResult').empty() to simple $('#imageResult')

4. Put the cloned image to #imageResult . It's .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

You can do it with jQuery:

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

https://jsfiddle.net/1o4ngjnc/

Answer 3

Try like this by using 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> 

Answer 4

 function myFunction(elment) { // Copy the <li> element and its child nodes var cln = elment.firstChild.cloneNode(true); // Append the cloned <li> element to <ul> with id="myList1" document.getElementById("imgResult").appendChild(cln); } 

 <div id="imgSorce"> <a href="#" onclick="myFunction(this)"><img width='100px' height='100px' src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg"/></a> <a href="#" onclick="myFunction(this)"><img width='100px' height='100px' src='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg'/></a> </div> <div id="imgResult"></div> 

Answer 5

Here is the code in pure Javascript:

 function myFunction(clicked_id) { document.getElementById("imgResult").innerHTML = "<img src='" + document.getElementById(clicked_id).getAttribute("src") + "'/>" } 

 <div id="imgSorce"> <a href="#" ><img onclick="myFunction(this.id)" id="img1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg"/></a> <a href="#" ><img onclick="myFunction(this.id)" id="img2" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"/></a> </div> <div id="imgResult"></div> 

Answer 6

You may simply replace the innerHTML :

 function myFunction(el) { document.getElementById("imgResult").innerHTML = el.innerHTML; //in case you want to keep appending images insted of replacing the old one, use `+=` //document.getElementById("imgResult").innerHTML += el.innerHTML } 

 <div id="imgSorce"> <a onclick="myFunction(this);" href="#"> <img src="images/img1.png" /> </a> <a onclick="myFunction(this);" href="#"> <img src='images/img2.png' /> </a> </div> <div id="imgResult"></div>