jQuery append content inside selected element

463 views 1 year ago jQuery

JQuery has made easy to handle Javascript events and animation. In this article we will see how to inserts content at the end of selected elements. We will use jQuery.append() method to insert content into element.

Syntax

$(selector).append(content);

In the below example, we have inserted <li> tag inside <ul> tag.

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>First LI</li>
        <li>Second LI</li>
    </ul>
    <button type="button" id="add-li">Add to list</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#add-li').click(function() {
                $('#list').append('<li>Next LI</li>');
            });
        });
    </script>
</body>
</html>

There is another method appendTo(), which is similar to append(). In this method, you append the content in appendTo() element.

Syntax

$(content).appendTo(selector);

Here is the above example of appendTo().

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>First LI</li>
        <li>Second LI</li>
    </ul>
    <button type="button" id="add-li">Add to list</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#add-li').click(function() {
                $('<li>Next LI</li>').appendTo('#list');
            });
        });
    </script>
</body>
</html>

In the new article we will use prepend() and prependTo() methods. Thank you for support!

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]