jQuery DOM Insertion Inside

jQuery append() Method

The jQuery .append() method inserts the specified content as the last child of each HTML element in the jQuery collection.

The above jquery append method will append new text to the paragraphs when you click the Append text button.

When you click the second button named Append list it will keep appending a new list item named new item

The above example will produce the following output

jQuery appendTo() Method

Note that, jQuery .append() and jQuery .appendTo() methods perform the same task. The main difference is syntax i.e., placing content and target.

The above jquery appendTo method will append new text as jQuery to the paragraphs when you click the Append text button.

When you click the second button named Append list it will keep appending a new list item named new item

The above jquery appendTo method example will produce the following output

jQuery html() Method

When the jQuery html method is used to return the content, it return the content of the FIRST matched HTMLelement.

jQuery html() emthod, will overwrite the content of all the matched elements, if the method is used to set the content

Example

The above jquery html() method example will produce the following output