How to insert content into HTML documents with jQuery


In the previous lesson, Taimienphi.vn introduced you to the Getter and Setter method in jQuery, the next lesson below Taimienphi.vn will introduce you how to insert content into HTML documents with jQuery.


How to insert content into HTML documents with jQuery

To learn how to insert content into HTML documents using jQuery, read along with the following jQuery lesson of Taimienphi.vn.

Table of Contents:
1. How to insert content into HTML documents with jQuery
2. The append () method in jQuery
3. The prepend () method in jQuery
4. Insert multiple elements using append () and preend ()
5. The before () method in jQuery
6. The after () method in jQuery
7. Insert multiple elements using before () and after () methods in jQuery
8. Method wrap () in jQuery

1. How to insert content into HTML documents with jQuery

jQuery provides several methods, including append (), prepend (), html (), text (), before (), after (), wrap (), … allows users to insert new content within an existing element.

2. The append () method in jQuery

Method append () In jQuery it is used to insert content at the end of selected elements.

For example: The following example illustrates the use of the append () method in jQuery to insert some HTML content into paragraphs in the document:

how to insert content into jquery html document

The output will look like the following:

how to insert content into html file using jquery 2

Note: The contents or elements are inserted by methods append () and method prepend () in jQuery will be added inside the selected element.

3. The prepend () method in jQuery

Method prepend () In jQuery it is used to insert content at the beginning of selected elements.

For example: The following example illustrates how to insert HTML content into paragraphs on an existing document using the prepend () method:

How to insert content into html file using jquery 3

The output will look like the following:

How to insert content into html file using jquery 4

4. Insert multiple elements using append () and preend ()

Also the modal append () and preend () In jQuery also allows many arguments as input.

For example: The following code snippet illustrates how to insert an element h1, p and element img inside the element body:

how to insert content into html file using jquery 5

The output will look like the following:

How to insert content into html file using jquery 6

5. The before () method in jQuery

Method before () in jQuery is used to insert content before the selected elements.

For example: The following example illustrates the insertion of a piece of text before the element contained on an existing document using the before () method in jQuery:

How to insert content into html file using jquery 7

The output will look like the following:

How to insert content into html file using jquery 8

Note: content or elements inserted by methods before () and after () in jQuery is added outside the selected elements.

6. The after () method in jQuery

Method after () In jQuery it is used to insert content after selected elements.

For example: The following example illustrates how to insert text after an element contained in a document using the after () method in jQuery:

How to insert content into html file using jquery 9

The output will look like the following:

how to insert content into html text in jquery 10

7. Insert multiple elements using before () and after () methods in jQuery

Similarly, the methods before () and after () In jQuery also allows many arguments as input.

For example: The following example illustrates how to insert an element h1, p and img before the elements p:

how to insert content into html document jquery 11

The output will look like the following:

How to insert content into html file using jquery 12

8. Method wrap () in jQuery

Method wrap () In jQuery it is used to wrap the HTML structure around the selected elements.

For example: The jQuery code snippet below illustrates wraps for containing elements div by grade .wrapper in documents, wrap the content inside paragraph elements starting with the element p and element you:

How to insert content into html file using jquery 13

The output will look like the following:

how to insert content into html document jquery 14

https://thuthuat.taimienphi.vn/cach-chen-noi-dung-vao-tai-lieu-html-bang-jquery-52288n.aspx
The HTML lesson above Taimienphi.vn has shown you how to insert content into HTML documents with jQuery. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article. In the next lesson, Taimienphi.vn will introduce you further delete elements and attributes in jQuery.

.

Add a Comment

Your email address will not be published. Required fields are marked *