add new elements to DOM in jQuery
In this post we will give you information about add new elements to DOM in jQuery. Hear we will give you detail about add new elements to DOM in jQueryAnd how to use it also give you demo for it if it is necessary.
Use the jQuery append() or prepend() method
You can add or insert elements to DOM using the jQuery append() or prepend() methods. The jQuery append() method insert content to end of matched elements, whereas the prepend() method insert content to the beginning of matched elements.
The following example will show you how to add new items to the end of an HTML ordered list easily using the jQuery append() method. Let’s try it out and see how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Elements to DOM</title>
<script src="https://.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item</li>");
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
</html>
Similarly, you can add elements to the beginning of matched elements.
The following example will demonstrate how to add an HTML heading at the beginning of a paragraph element using the jQuery prepend() method.
ExampleTry this »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Elements to DOM</title>
<script src="https://.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").prepend("<h1>This is a heading</h1>");
});
});
</script>
</head>
<body>
This is a paragraph.</p>
<button>Add heading</button>
</body>
</html>
Hope this and post will helped you for implement add new elements to DOM in jQuery. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and Keep reading our blogs