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



  • I'm with an image and a div conteudo-img.
    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 way 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>



  • You can use target.appendChild(image.cloneNode()); where https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode is the method you seek to duplicate elements of the DOM. If you use .cloneNode(true) in elements that have descent (which is not the case of your HTML) you can also include in that copy the descent.

    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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2