jQuery - Is it possible copy and paste HTML?

Question

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

What exactly do you want to achieve with "copy and paste"? You haven't told us what you actually want to achieve. You can always move nodes to other nodes. — Felix Kling, Apr 14 '11 at 23:47
Do you mean duplicate and put after self, x number of times? What exactly do you mean? — karim79, Apr 14 '11 at 23:49
Uhm yeah, a sort of "duplicate". Like take this div and "dublicate" after another one. After take that div again and "duplicate" before another one. And so on... :) — markzzz, Apr 14 '11 at 23:50
possible duplicate of [Copy and paste clipboard in JavaScript. or jQuery](http://stackoverflow.com/questions/3475293/copy-and-paste-clipboard-in-javascript-or-jquery) — Robert Koritnik, Apr 14 '11 at 23:52
@markzzz: Just remember, duplicating an element with an `id` attribute will generate invalid HTML. — drudge, Apr 14 '11 at 23:52
@jnpcl : also if I use this strategy? http://api.jquery.com/clone/ — markzzz, Apr 14 '11 at 23:58
Ok, now I see what do you mean as invalid HTML : two elements with the same ID... yeah! That's will be a problem... Looking for the Town solution ;) — markzzz, Apr 15 '11 at 00:17

Town · Accepted Answer · 2011-04-15T00:05:02.137

20

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/

edited Apr 15 '11 at 00:05

answered Apr 14 '11 at 23:56

Town

14,706
3
48
72

Yeah...this avoids the id issue...but in fact doesnt include `
`, and I need that div with different ID every time I copy it...uhm....
– markzzz Apr 15 '11 at 00:19
1

A possible problem could be that `html()` also removes every event handler and ever `data` from the elements. – Felix Kling Apr 15 '11 at 00:35
Uhm... a solution could be `$('#divToMove').clone().insertAfter('#divToMove'+param).attr("id","trackline"+new Date().getTime());` ... what do you think? – markzzz Apr 15 '11 at 00:37
@markzzz: yeah, something like: `$('#content').clone().attr("id",new Date().getTime()).insertAfter('#content');` [here's a jsfiddle](http://jsfiddle.net/Town/WZfS5/). If you want to insert the new `div` after the last copied `div` then you'll just need to keep track of the newly-generated `id` and use that in `insertAfter()`. – Town Apr 15 '11 at 08:10

score 7 · Answer 2 · answered Apr 15 '11 at 00:20

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');
});

score 2 · Answer 3 · answered Apr 14 '11 at 23:48

2

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

answered Apr 14 '11 at 23:48

sym3tri

3,747
1
29
25

By the way, if you are talking about manipulating the DOM then your use of the terminology "Copy and Paste" is incorrect. – sym3tri Apr 15 '11 at 10:05

score 2 · Answer 4 · answered Apr 14 '11 at 23:55

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.

score 0 · Answer 5 · answered Aug 19 '16 at 08:39

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>

score 0 · Answer 6 · answered Apr 15 '11 at 00:03

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>

it copies contents of one div to another. If you need to duplicate a div, create a new one and copy all contents there! That would help to avoid the duplicate id problem. — Scherbius.com, Apr 15 '11 at 00:10

jQuery - Is it possible copy and paste HTML?

6 Answers6

Linked