freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md

id	title	challengeType	forumTopicId
bad87fee1348bd9aed608826	Use appendTo to Move Elements with jQuery	6	18340

Description

Now let's try moving elements from one div to another. jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element. For example, if we wanted to move target4 from our right well to our left well, we would use: $("#target4").appendTo("#left-well"); Move your target2 element from your left-well to your right-well.

Instructions

Tests

tests:
  - text: Your <code>target2</code> element should not be inside your <code>left-well</code>.
    testString: assert($("#left-well").children("#target2").length === 0);
  - text: Your <code>target2</code> element should be inside your <code>right-well</code>.
    testString: assert($("#right-well").children("#target2").length > 0);
  - text: Only use jQuery to move these elements.
    testString: assert(!code.match(/class.*animated/g));

Challenge Seed

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();

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

Solution

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-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>