matt-daniel-brown/jquery-add-content-after.html

## jquery-add-content-after.html
<!DOCTYPE html>
<title>My Example</title>

<style>
.box {
  background: orange;
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $(this).after( "<div class='box'>New box</div>" );
    });
  });
</script>
<button>Create a box</button>

## jquery-append-html-content.html
<!DOCTYPE html>
<title>My Example</title>

<style>
.box {
  background: orange;
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $( "<p>Surprise!</p>" ).appendTo( ".box" );
    });
  });
</script>
<button>Add Content</button>

<div class="box">
  <p>Main content.</p>
</div>

## jquery-clone-append-html-content.html
<!DOCTYPE html>
<title>My Example</title>

<style>
div {
  color: white;
  padding: 10px;
  margin: 20px;
}
.file {
  background: limegreen;
}
.folder {
  background: gold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( ".file" ).click( function() {
      $( this ).clone().prependTo( ".folder" );
    });
  });
</script>

<div class="file">
  File
</div>

<div class="folder">
  Folder
</div>
	<!DOCTYPE html>
	<title>My Example</title>

	<style>
	.box {
	background: orange;
	color: white;
	width: 150px;
	padding: 20px;
	margin: 10px;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
	$( function() {
	$( "button" ).click( function() {
	$(this).after( "<div class='box'>New box</div>" );
	});
	});
	</script>
	<button>Create a box</button>