jQuery Insert


in jQuery, there are four jQuery methods that are used to insert new content.

jQuery append() Method

The jQuery append() method is used to add content to the end of the specified elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").append("<b>This is bold tag.</b>");
  });
});
</script>
</head>
<body>
 <p id="data">This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery prepend() Method

The jQuery prepend() method is used to add content at the starting of the specified elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").prepend("<b>This is a bold tag.</b>");
  });
});
</script>
</head>
<body>
 <p id="data">This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery before() Method

The jQuery before() method is used to add content at the before of the specified elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").befor("<b>This is a bold Tag.</b>"); 
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery after() Method

The jQuery after() method is used to add content at the after of the specified elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<b>This ia a bold tag.</b>");
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>