Q:

How to add new elements to DOM in jQuery

mhmadesk
Save to bookmark
|
2022-05-17
|
  319 
Very Easy
0

How to add new elements to DOM in jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

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-3.5.1.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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Elements to DOM</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").prepend("<h1>This is a heading</h1>"); 
        });
    });
</script>
</head>
<body>
    <p>This is a paragraph.</p>
    <button>Add heading</button>
</body> 
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to remove elements from DOM in jQuery... >>
<< How to remove the attribute from an HTML element i...