freeCodeCamp/guide/english/certifications/front-end-libraries/jquery/clone-an-element-using-jquery/index.md

---
title: Clone an Element Using jQuery
---
## Clone an Element Using jQuery

In the last challenge we used the .appendTo() method in order to move one element into another, this challenge introduces the .clone() method which enables us to work with a copy of an element without altering the original. 

### Hint

For this challenge you will need to chain the .clone() and .appendTo() methods together. 

### Solution

```html
<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well"); //Creates a clone of #target5 then appends it to #left-well.
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>
```

### Sources
1. [For more information on .clone() visit jQuery's documentation.](https://api.jquery.com/clone/)