freeCodeCamp Challenge Guide: 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

Solution 1 (Click to Show/Hide)
<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.
5 Likes

Why do I get two (2) #target5 elements showing up in my #left-well?

2 Likes

I had the same issue; it works fine on my offline coding but not on the challenge; I thought I was doing something wrong

1 Like