How to add content to jQuery

Today, the editor will show you how to add content to jQuery. The knowledge points in the article are introduced in great detail. Friends who feel helpful can browse the content of the article with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Follow the editor to learn more about "how to add content to jQuery".

The front-end page uses JavaScript (jQuery) for nothing more than those usage scenarios: animation, Ajax, content filling and rendering, etc. The method of content filling usually uses the method of adding elements or the method of adding content. Take jQuery as an example, you can use after (), append (), appendTo (), and other methods to insert new content. But there are some differences between them. Today, the editor will talk about the differences between these insertion methods in jQuery.

Append ()

The append () method is a method that inserts content into the end of the selected element. Note that he is inserting content at the end of the content of an element, so the inserted content is still in that element. For example, there is the following HTML structure:

This is the original content.

We use the append method on the li element to insert a new piece of content: this is the new content and the structure becomes:

This is the original content. This is new content.

If the inserted content is a HTML tag, it will be rendered normally (displayed on the page)

Corresponding to the append () method, there is a prepend () method that can be used to insert content at the beginning of the selected element.

After ()

The after () method is a method that inserts content after the selected element. Note that he is inserting content behind an element, so the inserted content is not in this element.

For example, there is the following HTML structure:

This is the original content.

We use the after method on the li element to insert a new piece of content: this is the new content and the structure becomes:

This is the original content. This is new content.

Using the after () method on the li element can be understood as using the append method on its parent element.

If the inserted content is a HTML tag, it will be rendered normally (displayed on the page)

Corresponding to the after () method, there is a before () method that can be used to insert content before the selected element.

If you know something about pseudo-elements / pseudo-classes of HTML, the use of the after method is actually the same as setting content for pseudo-elements / pseudo-classes.

AppendTo ()

The appendTo () method is a method that inserts an element into the end of the selected element. Note that he is inserting an element at the end of the content of an element, so the inserted element is still in that element. For example, there is the following HTML structure:

This is the original content.

We use the appendTo () method on the li element to insert a new piece of content:

This is new content.

The structure becomes:

This is the original content.

This is new content.

Note: the appendTo () method is very similar to the append () method, but there are some differences: the content inserted by the appendTo () method must be a HTML tag, which is an element after insertion, while append inserts only the text, which will be rendered if the text is a HTML tag.

Corresponding to the appendTo () method, there is a prependTo () method that can be used to insert an element at the beginning of the selected element.

InsertAfter () method

The after () method is a method that inserts an element after the selected element. Note that he is inserting an element behind an element, so the inserted element is not in this element.

For example, there is the following HTML structure:

This is the original content.

We use the insertAfter method on the li element to insert a new piece of content:

This is new content.

The structure becomes:

This is the original content.

This is new content.

Using the insertAfter () method on the li element can be understood as using the appendTo () method on its parent element.

Note: the insertAfter () method is very similar to the after () method, but there are some differences: the content inserted by the insertAfter () method must be a HTML tag, which is an element after insertion, while after () inserts only the text, which will be rendered if the text is a HTML tag.

Corresponding to the insertAfter () method, there is an insertBrfore () method that can be used to insert an element before the selected element.

Jquery is what jquery is a simple and fast JavaScript library, it has a unique chain syntax and short and clear multi-function interface, efficient and flexible css selector, and can be extended to CSS selector, with convenient plug-in extension mechanism and rich plug-ins, after Prototype is another excellent JavaScript code base, can be used to simplify event processing, HTML document traversal, Ajax interaction and animation, in order to quickly develop the website.

Thank you for your reading, the above is the whole content of "how to add content to jQuery", learn friends to hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!