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://code.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>
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://code.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>
No comments:
Post a Comment