2.6 KiB
2.6 KiB
id | title | challengeType |
---|---|---|
bad87fee1348bd9aed608826 | Use appendTo to Move Elements with jQuery | 6 |
Description
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, 'Your <code>target2</code> element should not be inside your <code>left-well</code>.');
- text: Your <code>target2</code> element should be inside your <code>right-well</code>.
testString: assert($("#right-well").children("#target2").length > 0, 'Your <code>target2</code> element should be inside your <code>right-well</code>.');
- text: Only use jQuery to move these elements.
testString: assert(!code.match(/class.*animated/g), 'Only use jQuery to move these elements.');
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
// solution required