The third day of jquery learning diary: append and remove

Today is the third day to learn about jquery. I mainly learn about the usage of semi-commit append.

The append function is to append content to each matching element. Append ("content"); content is the append content. It can be an html code or an element.

Example: <div id = "Div1"> </div>

Append a B label to the div.

Script code: $ ("# Div1"). append ("<B> I am an appended element </B> ");

In this way, a B label is appended to the div, and the running result is: <div id = "Div1"> <B> I am an appended element </B> </div>

This method is to add an element to the specified tag, and a similar method is provided when there are too many tags whose appendTo (),

This method adds an element to a specified element:

A appendTo (B) is to add A to B. For example:

Html code: <B id = "y"> don't touch me </B> <div id = "Div2"> </div>

Script code: $ ("# y"). appendTo ($ ("# Div2 "));

The running result is as follows: <div id = "Div2"> <B id = "y"> don't touch me </B> </div>

Add the element to an element.

========================================================== ======================

Add an element to or before an element

In this case, you need to use after and before.

Add Element B to the back of the div.

Html code: <div id = "Div1"> I am here! </Div>

Script code: $ ("# Div1"). after ("<B> bring me! </B> ");

The running result is: <div id = "Div1"> I am here! </Div>

<B> take me with you! </B>

By the way, the dynamically added tag is not displayed in the source file. We can open the developer tool to see it.

Click the developer tool to display this interface:

Here we can see the effect of the script code you have written.

Let's talk about the episode. Let's talk about before. Replace "after" in the above Code with "before ".

The result is, "Take me with me" at the front, and "I Am Here" at the back. You know ~~

========================================================== ======================

The insert and append operations are acceptable. Should we also delete them? The delete operation in jquery uses remove ();

For example, $ ("# Div1"). remove (); Removes the Div1 label.

Remove can remove the specified tag,

Html code: <p class = "a"> 1 </p>

<P class = "B"> 2 </p>

<P class = "a"> 3 </p>

<P class = "c"> 4 </p>

Script code: $ ("p"). remove (". ");

In this way, all the class a labels of the p tag are removed, and the result is left:

<P class = "B"> 2 </p>

<P class = "c"> 4 </p>

These are the deletion of the specified tag. to delete the attributes or classes of a tag, there is another function.

RemoveClass () delete class, removeAttr () delete attribute

If you want to delete all classes, do not add parameters to the function. If you want to delete a specified class, enter the class name as the function parameter.

The same is true for deleting attributes. We only provide one example to illustrate

<p class="selected first">Hello</p>

<p class="selected ">hi</p>

<p class="first">word</p>

This is a 3 p tag.

Next we will remove the p tag containing the frist class.

$("p").removeClass("first");

Only:<p class="selected ">hi</p>

This is the code for dynamically adding and deleting a tag!

These things are really messy ~~~~~~

========================================================== ====================

I learned these things today. Thank you for browsing.

Continue tomorrow ~~~

Coming soon ~~~~~~