In this article we will learn about Jquery Add Element:
1) append() => Insert content at the end.
2) prepend() => Insert content at the beginning.
3) after() => Insert content after selected element.
4) before() => Insert content before selected element.
Append() Method:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").append(" <b>Appended text</b>.");
});
});
</script>
</head>
<body>
<p></p>
<button id="btn">Append text</button>
</body>
</html>
Prepend() Method:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").prepend(" <b>Prepended text</b>.");
});
});
</script>
</head>
<body>
<p>Some Text</p>
<button id="btn">Append text</button>
</body>
</html>
Before() Method
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").before(" <b>Appended text</b>.");
});
});
</script>
</head>
<body>
<p>This is para</p>
<button id="btn">Append text</button>
</body>
</html>
After() Method:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").after(" <b>Appended text</b>.");
});
});
</script>
</head>
<body>
<p>This is para</p>
<button id="btn">Append text</button>
</body>
</html>
Comments
Post a Comment