Copying an image from one div to another - Jscript Methods

Asked

Viewed 27 times

1

I have an image and a div conteudo-img.
When clicking on the image it has to be copied to the div conteudo-img, what methods I can use to make this copy and which one is 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>
		<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>
		<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>
		<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 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>
		<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>
		<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>
		<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>
	</div>
	<div id="conteudo-img"> </div>

javascript html5

2 answers

4


You can use target.appendChild(image.cloneNode()); where .cloneNode() is the method you seek to duplicate DOM elements. If you use .cloneNode(true) in elements that have progeny (which is not the case with your HTML) you can include the progeny in this copy 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>
    <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>
    <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>
    <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 id="conteudo-img"> </div>
</body>

</html>

  • What would this be const? It’s like defining a variable?

  • 1

    @You can read more about it here: https://answall.com/a/206121/129

  • Instead of passing the id of the div as parameter, I can also pass the class for example??

  • @Sora depends. If there is only one element you can use .querySelector('nomeDaClasse'). If you have multiple elements with that class you have to iterate. Displays the HTML case you have that I can give an example.

  • I changed my question and made a new code where it requires the class name as parameter

  • @Sora my answer is still valid if you want to copy only the img. Or do you want to copy the div around the img?

  • Only the img, I thought it was not valid because of this line: const images = document.getElementById('images'); However tested and worked, I will mark your reply as valid soon Thanks @Sergio !!

Show 2 more comments

2

You can do so 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>
		<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>
		<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>
		<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 id="conteudo-img"> </div>
</body>
</html>

Or you can 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>
	<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>
		<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>
		<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>
		<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 id="conteudo-img"> </div>
</body>
</html>

  • I’ll study this coding, vlw !!!

  • The answer is valid but if you will use HTML I think it is safer to append this.outerHTML. Becomes less dependent on variations in HTML such as classes or fields data- that these elements may have.

  • @Sergio sure rsrs your example is much more valid than mine. I just wanted to show a way to do.

  • I don’t agree with "much more valuable than mine". Your answer is good/valid. It was just a comment/suggestion.

  • @Sergio I’m always learning with your tips here, I always follow your answers. Thanks ;)

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.