The append() method inserts specified content at the end of the selected elements.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
jQuery append() function examples
Example 1 - Appends some HTML to all paragraphs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>append 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").append("<strong>Hello</strong>"); </script> </body> </html>
Example 2 - Appends an Element to all paragraphs
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append 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").append(document.createTextNode("Hello"));
</script>
</body>
</html>
Example 3 - Appends a jQuery object to all paragraphs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>append demo</title> <style> p { background: yellow; } </style> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> </head> <body> <strong>Hello world!!!</strong> <p>I would like to say: </p> <script> $("p").append($("strong")); </script> </body> </html>
Comments
Post a Comment