Common methods for inserting inside DOM nodes-JS Tutorial-php.cn

1. Inserting append() and appendTo() inside the DOM

It is not enough to dynamically create elements. It is only temporarily stored in memory. Ultimately we need to put it into the page document and present it. So the question is, how to put it in the document?

This involves a positional relationship. It is common to put this newly created element inside it as a child element of a certain element on the page. For such processing, jQuery defines two operation methods.

Selector	Description
append()	Append content to each matching elementOr append child nodes
appendTo()	Append all matching elements To another specified element collection

append: This operation is similar to executing the native appendChild method on the specified elements to add them to the document. .

appendTo: In fact, using this method reverses the conventional $(A).append(B) operation, that is, instead of appending B to A, appending A to B.

通过append与appendTo添加元素

Copy after login

Simple summary:

The two methods .append() and .appendTo() have the same function. The main difference is the syntax - content and The position of the target is different

append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象

Copy after login

2. Insert prepend() and prependTo() inside the DOM

Methods to operate inside the element, except when selected In addition to inserting specified content at the end of the element (still inside) through append and appendTo, you can also insert it before the selected element. The methods provided by jQuery are prepend and prependTo.

##prepend() prependTo() ##prepend The use and difference between prependTo:

Selector

Description

Insert content at the beginning of the selected element

Prepend all matching elements into the specified element collection

Tips:is the reverse

prepend()

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

Copy after login

通过prepend与prependTo添加元素

测试prepend

测试prependTo

Copy after login

Here is a summary of the differences between the four internal operation methods:

append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中

Copy after login

The above is the detailed content of Common methods for inserting inside DOM nodes. For more information, please follow other related articles on the PHP Chinese website!