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
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/
<div id="content">, and I need that div with different ID every time I copy it...uhm....
html() also removes every event handler and ever data from the elements.$('#divToMove').clone().insertAfter('#divToMove'+param).attr("id","trackline"+new Date().getTime()); ... what do you think?
$('#content').clone().attr("id",new Date().getTime()).insertAfter('#content'); here's a jsfiddle. 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().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');
});
Copy and paste is intentionally not possible in the browser via JavaScript. It is a security restriction
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.
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>
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>
.clone()is jQuery's duplication function.