CODEWITHSUNDEEP
jquery
markzzz
markzzz

Reputation: 47945

jQuery - Is it possible copy and paste HTML?

jQuery - Is it possible copy and paste HTML?

Starting with an example, if I have this lines of HTML :

<div id="divToMove">
    ... somethings like 100 lines of code ...
</div>

i'd like to know if I can take this div and copy and paste many times...

I tried to put a jQuery/JS function that "add" this code from javascript to the HTML page, but seems that is too slower as process. Maybe a copy and paste (if possible) is faster... Some helps? Thanks

Upvotes: 8

Views: 32089

Answers (6)

Vishnu Bhadoriya
Vishnu Bhadoriya

Reputation: 1676

copy and paste on-click button jquery code

<button id="copybtn">Copy</button>
<div id="toCopy">Content To Be Copied</div>

<div id="toPaste"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#copybtn").click(function(){

   $('#toPaste').append($("#toCopy").html());

});
</script>

Upvotes: 0

Ady Ngom
Ady Ngom

Reputation: 1302

look into .clone() and you could do things like after clicking on the target div:

$('#targetDiv').click(function(){
   var cloned = $(this).clone();
   // now you could put at the end another div
   // $('#myOtherDiv').append(cloned);
   // or put insert after another div
   // $(cloned).insertAfter('#myOtherDiv');
});

Upvotes: 8

Town
Town

Reputation: 14906

Something like this?

HTML

<input type="button" id="copy" value=" copy "/>

<div id="content">
    <span>here's a span</span>
    <div>and a div</div>
</div>

jQuery

$(function()  {
    $('#copy').click(function(){
        var content = $('#content').html();
        var newdiv = $("<div>");
        newdiv.html(content);
        $('#content').after(newdiv);
    });
  });

In action: http://jsfiddle.net/Town/5q2CK/

Upvotes: 20

Scherbius.com
Scherbius.com

Reputation: 3414

yes it is possible! Following code copies HTML from div "x" to div "y":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    </head>
    <body>

        <div id="x">
            This is a test
            <span>this is another text</span>
        </div>

        <div id="y">
        </div>

        <script type="text/javascript">

            var  x = document.getElementById("x"),
                 y = document.getElementById("y");

            y.innerHTML = x.innerHTML;

        </script>

    </body>
</html>

Upvotes: 0

jrlmx2
jrlmx2

Reputation: 1987

You should be able to do something like 

var html = $( '#divToMove' ).html();

This will take the contents of the div and put it into the variable html. You can then turn around and 

$( '#paste' ).append( html );

to add the 'copied' html to the end of that location. There is also a prepend function to add the html to the beginning of a container

$( '#paste' ).prepend( html );

This is the only way I know of to "copy and paste" html. One thing to note, .html() will grab the contents of the selector and not the element the selector is pointing at.

Upvotes: 2

sym3tri
sym3tri

Reputation: 3823

Copy and paste is intentionally not possible in the browser via JavaScript. It is a security restriction

Upvotes: 2

Related Questions