Posted in js
3857
6:20 am, August 31, 2018
 

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. 

CSS

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

JS

// 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);
  document.getElementById(target_id).appendChild(cln);
}

// 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;
}

HTML


<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

View Statistics
This Week
111
This Month
507
This Year
1018

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in js
jqueryui date selector with examples and code with custom date formatting fancybox youtube showing video links in a lightbox - updated with fixed code parts fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty enable tinymce on a target textarea by id Generate Random Whole Numbers with JavaScript Function Generate Random Fractions with JavaScript jquery document ready make clickable element with clickable class using getElementById and innerHTML to change the html of content no jquery preserve tabs in textarea when tab key is pressed jqueryui includes css and js using vue and json data jqueryui date selector with examples and code jquery accordion fancybox youtube showing video links in a lightbox jquery jqueryui vue script includes get select option form value with jquery show the year with js jquery clone and append elements stacktable jQuery plugin for stacking tables on small screens load content with jquery find all elements add class jquery digital clock with jquery using regex with replace to replace all instances of something in a string random string generator guid set and check a cookie using js cookie validate email address from string check length of element jquery access hacker news json firebase api via jquery testing chartjs clipboard copy js tiny mce editor tinymce do something later with settimeout or loop with setinterval validate form data using javascript to check required html elements mithril testing parallax js scroll testing change the water colour in google maps for an already initialised map scrollbar replacement simplebar load google sheet data into json string with jquery change favicon with jquery add this Slick Slider Carousel change the window title flems embed in url detect window scroll position jquery truncate string using jquery round number with js google map with overlay data
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

block-size

The block-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.
block-size css reference