preface
With jQuery, you can easily add and remove elements.
Add element
There are four main methods for adding elements
- append() - insert content at the end of the selected element
- prepend() - inserts content at the beginning of the selected element
- after() - insert content after the selected element
- before() - insert content before the selected element
The append() method inserts content at the end of the selected element (as a child of the element)
copy<div id="demo"> <p class="text-info">hello world</p> <input type="text" name="user" value="hello world"> </div> <button id="btn">Point me</button> <script> $(document).ready(function(){ $("#btn").click(function(){ // Add an element $("#Demo ").Append (" <p> append a text </p> "); }); }); </script>
Click the button to add an element under div

prepend() inserts content at the beginning of the selected element
copy$(document).ready(function(){ $("#btn").click(function(){ // Add an element $("#Demo ").Prepend (" <p> append a text </p> "); }); });
To achieve the effect, add to the first child element under div

after() inserts content after the selected element
copy$(document).ready(function(){ $("#btn").click(function(){ // Add an element $("#Demo ").After (" <p> append a text </p> "); }); });
Add sibling element after div

before() inserts content before the selected element
copy$(document).ready(function(){ $("#btn").click(function(){ // Add an element $("#Demo ").Before (" <p> append a text </p> "); }); });

replaceWith() replace element
The replaceWith() method replaces the selected element with the specified HTML content or element.
The content parameter is required. Specifies the content to replace the selected element. Existing elements will not be moved, but will be copied and wrapped around the selected elements.
Basic grammar
copy$(selector).replaceWith(content)
Use examples
copy<div id="demo"> <p class="text-info">hello world</p> <input type="text" name="user" value="hello world"> </div> <button id="btn">Point me</button> <script> $(document).ready(function(){ $("#btn").click(function(){ // Add an element $("p.text-info").replaceWith("<p>Replace with new text</p>"); }); }); </script>
After replacement

The replaceWith() method can also pass a function function
copy$(selector).replaceWith(function())
Example
copy$(document).ready(function(){ $("#btn").click(function(){ // Add an element $("p.text-info").replaceWith(function () { return '<p>new hello world</p>' }); }); });
replaceAll() has the same function as replaceWith(), but the target and source are the opposite
On the left is the new content, and on the right is the replaced content
copy$(content).replaceAll(selector)
Example
copy$(document).ready(function(){ $("#btn").click(function(){ // Add an element $('<p>new hello world</p>').replaceAll('p.text-info') }); });
Summary:
- replaceAll() and The replaceWith() function is similar, mainly due to the location difference between the target and the source
- replaceWith() and The replaceAll() method deletes all data and event handlers associated with the node
- The replaceWith() method, like most other jQuery methods, returns jQuery objects, so it can be linked with other methods
- The jQuery object returned by the replaceWith() method refers to the node before replacement, rather than the node after replacement through the replaceWith/replaceAll method
Delete the elements remove() and empty()
To delete elements and contents, you can use the following two jQuery methods:
- empty() - delete child elements from the selected element
- remove() - delete the selected element (and its child elements)
empty() deletes child elements from the selected element
Example
copy<div id="demo"> <p class="text-info">hello world</p> <input type="text" name="user" value="hello world"> </div> <button id="btn">Point me</button> <script> $(document).ready(function(){ $("#btn").click(function(){ // Add an element $('#demo').empty(); }); }); </script>
div is still there

remove() deletes the element and child elements
copy<div id="demo"> <p class="text-info">hello world</p> <input type="text" name="user" value="hello world"> </div> <button id="btn">Point me</button> <script> $(document).ready(function(){ $("#btn").click(function(){ // Add an element $('#demo').remove(); }); }); </script>
remove() deletes the div and its child elements