Web page design of jQuery_5. jQuery to manipulate DOM elements (below)

Continue to the previous one

Fourth, use jQuery to add DOM elements

We can also use jQuery to dynamically add data, like we add an extra li to a ul tag, let’s take a look at those ways to add

1. append() & prepend()

append is to add after the internal node of the element, prepend is to add before the internal node of the element

Let's click to test

Is ok, no problem

2. after() & before()

These two are the same, and DOM elements can also be added. The difference from the above two is that they are added outside the element, let’s take a look again

Let's take a look at how this will be added

As you can see, it's not very aligned, let's check the source code

As you can see, the DOM added by this after and before have all gone outside the target element

Five, use jQuery to delete DOM elements

If there is an addition, there will be a deletion, let’s see how to delete

1. remove()

This deletion can directly remove the body of the selected element, including the parent node

Let's click the remove button

As you can see, the entire div is gone

2. empty()

The difference between empty and remove is that empty will not delete the parent node. Let’s click empty again

 

Let’s get here first, everyone digests it, there are many more specific methods for manipulating DOM nodes. For more details, please refer to the jQuery official website. If you have any questions, please contact me. QQ: 2100363119

Welcome everyone to log on to my official website, the official website address: https://www.lemon1234.com

Guess you like

Origin blog.csdn.net/weixin_45908370/article/details/109718784