Add New HTML Content
We will look at four jQuery methods that are used to add new content:
append()– Inserts content at the end of the selected elements.prepend()– Inserts content at the beginning of the selected elements.after()– Inserts content after the selected elements.before()– Inserts content before the selected elements.
jQuery append() Method
The jQuery append() method inserts content AT THE END of the selected HTML elements.
<script>
$(document).ready(function(){
$(“.btn-one”).click(function(){
$(“p”).append( “<b> Appended Text</b> .” );
});
$(“.btn-two”).click(function(){
$(“ol”).append( “<li> Appended list Text</li> .” );
});
});
</script>
<body>
<p >This is Roshan Kumar Jha</p>
<ol>
<li> List 1</li>
<li> List 3</li>
<li> List 3</li>
</ol>
<button type=”button” class=”btn-one” >click</button>
<button type=”button” class=”btn-two” >click me</button>
</body>
jQuery prepend() Method
The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.
<script>
$(document).ready(function(){
$(“.btn-one”).click(function(){
$(“p”).prepend( “<b> Appended Text</b> .” );
});
$(“.btn-two”).click(function(){
$(“ol”).prepend( “<li> Appended list Text</li> .” );
});
});
</script>
<body>
<p >This is Roshan Kumar Jha</p>
<ol>
<li> List 1</li>
<li> List 3</li>
<li> List 3</li>
</ol>
<button type=”button” class=”btn-one” >click</button>
<button type=”button” class=”btn-two” >click me</button>
</body>
jQuery after() and before() Methods
The jQuery after() method inserts content AFTER the selected HTML elements.
The jQuery before() method inserts content BEFORE the selected HTML elements.
<script>
$(document).ready(function(){
$(“.btn-one”).click(function(){
$(“img”).before( ” Before” );
});
$(“.btn-two”).click(function(){
$(“img”).after( “After” );
});
});
</script>
<body>
<img src = images/roshan.jpg alt =”roshan” width = “100”><br>
<button type=”button” class=”btn-one” >click</button>
<button type=”button” class=”btn-two” >click me</button>
</body>
