Copying an image from one div to another - Methods in Jscript

Navigation
1

I have an image and a% div of%.
By clicking on the image it has to be copied to the div conteudo-img , which methods can I use to make this copy and which is the most viable via javaScript . 

#images{
float:left;
}

#conteudo-img{
width: 300px;
height: 300px;
border: 1px solid #f1f;
float: left;
}
<html>
<body>
	<div id="images"> 
		<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br>
	</div>
	<div id="conteudo-img"> </div>
</body>
</html>

	#images{
		float:left;
	}

	#conteudo-img{
		width: 300px;
		height: 300px;
		border: 1px solid #f1f;
		float: left;
	}
	<div id="random_id"> 
		<div class="img">
			<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br></div><divclass="img">
			<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br></div><divclass="img">
			<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br></div><divclass="img">
			<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br></div></div><divid="conteudo-img"> </div>
    
asked by anonymous 23.11.2017 / 12:35

2 answers

4

You can use target.appendChild(image.cloneNode()); where .cloneNode() is the method that searches to duplicate DOM elements. If you use .cloneNode(true) on elements that have progeny (which is not the case for your HTML) you can include the progeny as well. 

const images = document.getElementById('images');
const target = document.getElementById('conteudo-img');
images.addEventListener('click', function(e) {
  const image = e.target;
  target.appendChild(image.cloneNode());
});
#images {
  float: left;
}

#conteudo-img {
  width: 300px;
  height: 300px;
  border: 1px solid #f1f;
  float: left;
}
<html>

<body>
  <div id="images">
    <img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br>
  </div>
  <div id="conteudo-img"> </div>
</body>

</html>
    
23.11.2017 / 12:38
2

You can do this with JS 

let img = document.querySelectorAll('img')

for(let i = 0; i < img.length; i++){
  img[i].onclick = function(){
    let attrImage = this.getAttribute('src')
    
    document.getElementById('conteudo-img').innerHTML = '<img src="'+ attrImage +'">'
  }
}
#images{
float:left;
}

#conteudo-img{
width: 300px;
height: 300px;
border: 1px solid #f1f;
float: left;
}
<html>
<body>
	<div id="images"> 
		<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br>
	</div>
	<div id="conteudo-img"> </div>
</body>
</html>

Or you can also use jquery 

$('img').on('click', function(){
  var image = $(this).attr('src')
  
  $('#conteudo-img').append('<img src="'+ image +'">')
})
#images{
float:left;
}

#conteudo-img{
width: 300px;
height: 300px;
border: 1px solid #f1f;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><body><divid="images"> 
		<img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br><imgsrc="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br>
	</div>
	<div id="conteudo-img"> </div>
</body>
</html>
    
23.11.2017 / 12:41
How is jQuery built? Help on how to get the last word of a string and append to the beginning using java