The after() method inserts specified content after the selected elements.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Example 1
Inserts some HTML after all paragraphs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").after("<b>Hello</b>");
</script>
</body>
</html>
Example 2
Inserts a DOM element after all paragraphs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").after(document.createTextNode("Hello"));
</script>
</body>
</html>
Example 2
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<b>Hello</b>
<p>I would like to say: </p>
<script>
$("p").after($("b"));
</script>
</body>
</html>
Comments
Post a Comment