jQuery clone() example

by HYEONGJINKIM

HTML

<h1>jQuery clone() example</h1>

<div class="smallBox">
  I'm a small box
  <div class="smallInnerBox">I'm a small small inner box</div>
</div>

<p>
  <button id="cloneButton1">clone()</button>
  <button id="cloneButton2">clone() button (default)</button>
  <button id="cloneButton3">clone(true) button</button>
  <button id="reset">reset</button>
</p>

CSS

.smallBox {
  padding: 8px;
  border: 1px solid blue;
  margin: 8px;
}

.smallInnerBox {
  padding: 8px;
  border: 1px solid green;
  margin: 8px;
}

JavaScript

$("#reset").click(function() {
  location.reload();
});
//without event handler
$("#cloneButton1").click(function() {
  $('.smallBox').clone().insertAfter(".smallBox");
});
//without event handler
$("#cloneButton2").click(function() {
  $('#cloneButton1').clone(false).insertAfter("#cloneButton1");
});
//with event handler
$("#cloneButton3").click(function() {
  $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
});