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

---
## Problem Explanation
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. 


---
## Hints

### Hint 1

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


---
## Solutions

<details><summary>Solution 1 (Click to Show/Hide)</summary>

```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>
```

#### Relevant Links
1. [For more information on .clone() visit jQuery's documentation.](https://api.jquery.com/clone/)
</details>