How to dynamically add and delete div content in jquery

In front-end development, using jQuery to dynamically add or delete page elements is a very common requirement. This article will introduce how to use jQuery to dynamically add or delete div content on the page.

1. Add div content

The most basic way to add div content is to use jQuery’s append method. This method adds a new element at the end of an existing element.

The sample code is as follows:

$(document).ready(function() {
    $("#addBtn").click(function() {
        $("#myDiv").append("<p>这是新的一行内容。</p>")
    });
});

In the above sample code, an event is triggered by clicking a button and a new row of p elements is added to the end of the element with the id "myDiv". This p element contains the content that needs to be added, which can be any html tag and text.

If you need to add multiple lines of content, you can change the content in the append method of the above example code to the HTML code that needs to be added. You can also use a loop to repeatedly add the same content, for example:

$(document).ready(function() {
    $("#addBtn").click(function() {
        for(var i = 0; i < 5; i++) {
            $("#myDiv").append("<p>这是新的一行内容。</p>");
        }
    });
});

In the above example code, clicking the button will add 5 new rows of p elements to the end of the element with the id "myDiv", each row containing the same html code.

2. Delete div content

The method of using jQuery to delete div content is also very simple. You can use the remove or empty method.

1. remove method

The remove method can remove the selected element and all its child elements. The sample code is as follows:

$(document).ready(function() {
    $("#removeBtn").click(function() {
        $("#myDiv").remove();
    });
});

In the above sample code, clicking the button will delete the element with the id "myDiv" and all its child elements.

2. empty method

The empty method removes all child elements of the selected element, but retains the selected element itself. The sample code is as follows:

$(document).ready(function() {
    $("#emptyBtn").click(function() {
        $("#myDiv").empty();
    });
});

In the above sample code, clicking the button will retain the element itself with the id "myDiv" but delete all the child elements of that element.

3. Summary

Through the above introduction, we can see that it is very simple to use jQuery to dynamically add or delete div content. Just use the append method to add content and the remove or empty method to delete content. In actual projects, this function is usually used to dynamically display data, add and delete form items, etc. Developers can use and adjust this feature more according to different needs.

The above is the detailed content of How to dynamically add and delete div content in jquery. For more information, please follow other related articles on the PHP Chinese website!