Explanation of JQuery Add Elements with Example.

Posted by

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>