Skip to content

Instantly share code, notes, and snippets.

@matt-daniel-brown

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

Created October 14, 2017 00:02
Show Gist options
  • Save matt-daniel-brown/33985b4cfc0942ffac5a5c13fe486525 to your computer and use it in GitHub Desktop.
Save matt-daniel-brown/33985b4cfc0942ffac5a5c13fe486525 to your computer and use it in GitHub Desktop.
Download ZIP
Simple DOM Manipulations Using jQuery.
Raw
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>
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment