jquery clone and append elements

This jquery function clones an element and appends it to another one. 

Here is the basic code:

$( ".clone-me" ).clone().appendTo( ".append-me" );

I also updated this to work with just raw js, so you can see the difference with the jquery clone and append and just using javascript to do the same thing. 


* {
  box-sizing: border-box;
  transition: all 0.2s;
  scroll-behavior: smooth;


// this is the jquery version of clone and append
function clone_append() {
  $( "#clone-me" ).clone().appendTo( "#append-to-me" );

// this is a version of clone and append that does not use jquery
function clone_append_js(source_id, target_id) {
  //var itm = document.getElementById(source_id).lastChild;
  var itm = document.getElementById(source_id);
  var cln = itm.cloneNode(true);

// this is a common function just to write the content into the result div
function write_result(result) {
  var result_html = document.getElementById("result");
  result_html.innerHTML = result;


<button onclick='clone_append();' class='btn btn-primary mb-1'>Clone and Append (JQuery)</button>
<button onclick='clone_append_js("clone-me", "append-to-me");' class='btn btn-primary mb-1'>Clone and Append (JS)</button>

<div class='alert alert-warning' id='clone-me'>Clone Me</div>
<div class='alert alert-info' id='append-to-me'>Append to Me</div>

Working Result

Clone Me
Append to Me

Other Items in js
Page Views

This page has been viewed 234 times.

Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.


Random Quote
For a long time it had seemed to me that life was about to begin - real life. But there was always some obstacle in the way, something to be gotten through first, some unfinished business, time still to be served, or a debt to be paid. Then life would begin. At last it dawned on me that these obstacles were my life.
Alfred D. Souza