jQuery append() and appendTo() example

by HYEONGJINKIM

HTML

<h1>jQuery append() and appendTo example</h1>

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

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

<p>
  <button id="append">append()</button>
  <button id="appendTo">appendTo()</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’).append(‘new text’);
 $("#append").click(function() {
   $('.box').append("<div class='newbox'>I'm new box by append</div>");
 });
 
 //$(‘new text’).appendTo(‘selector’);
 $("#appendTo").click(function() {
   $("<div class='newbox'>I'm new box by appendTo</div>").appendTo('.box');
 });

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