prepend() VS before()
prepend() vs before()
- prepend(): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
- before(): Insert content, specified by the parameter, before each element in the set of matched elements.
append() vs after()
- append(): Insert content, specified by the parameter, to the end of each element in the set of matched elements.
- after(): Insert content, specified by the parameter, after each element in the set of matched elements.
Browser ViewTEXT HERE
TEXT HERE
<html>
<head>
<title>jQuery prepend() VS before() and append() VS after() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function(){
$("p").append("<strong style='color:red'>.....Append</strong>");
$("p").after("<strong style='color:red'>After....</strong>");
$("div").prepend("<strong style='color:blue'>Prepend....</strong>");
$("div").before("<strong style='color:blue'>...Before</strong>");
});
});
</script>
</head>
<body>
<button id="btn">Append/After/Prepend/Before</button>
<p>TEXT HERE</p>
<div>TEXT HERE</div>
</body>
</html>
Related Topics