JQuery Insert
15 - Oct - 2021
XpertPhp
24
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>