jQuery prepend() and prependTo() example

by HYEONGJINKIM

HTML

<h1>jQuery prepend() and prependTo example</h1>

<div class="box">I'm a big box</div>

<div class="box">I'm a big box 2</div>

<p>
  <button id="prepend">prepend()</button>
  <button id="prependTo">prependTo()</button>
  <button id="reset">reset</button>
</p>

CSS

.box {
  padding: 8px;
  border: 1px solid blue;
  margin-bottom: 8px;
  width: 300px;
  height: 100px;
}

.newbox {
  padding: 8px;
  border: 1px solid red;
  margin-bottom: 8px;
  width: 200px;
  height: 50px;
}

JavaScript

//$(‘selector’).prepend(‘new text’);
 $("#prepend").click(function() {
   $('.box').prepend("<div class='newbox'>I'm new box by prepend</div>");
 });
 
 //$(‘new text’).prependTo(‘selector’);
 $("#prependTo").click(function() {
   $("<div class='newbox'>I'm new box by prependTo</div>").prependTo('.box');
 });

 $("#reset").click(function() {
   location.reload();
 });