1. Insert append() and appendTo() inside DOM
Dynamically created elements are not enough, they are only temporarily stored in memory, and eventually we need to put them into the page document and present them. So the question arises, how to put it on the document?
This involves a location relationship. It is common to place this newly created element inside as a child of an element on a page. For such processing, jQuery defines two methods of operation.
| selector | describe |
| append() |
Adding content or subnodes to each matching element |
| appendTo() |
Appends all matched elements to another specified set of elements |
Appnd: This operation is similar to executing native append Child methods on the specified elements and adding them to the document.
AppndTo: In fact, using this method reverses the conventional $(A). Appnd (B) operation, that is, not to append B to A, but to append A to B.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .content { width: 300px; } .append{ background-color: blue; } .appendTo{ background-color: red; } </style> </head> <body> <h2>adopt append and appendTo Additive elements</h2> <button id="bt1">Click through jQuery Of append Additive elements</button> <button id="bt2">Click through jQuery Of appendTo Additive elements</button> <div class="content"></div> <script type="text/javascript"> $("#bt1").on('click', function() { //.append(), The content is behind the method. //The parameter is the content to be inserted. $(".content").append('<div class="append">adopt append Elements added by methods</div>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()On the contrary, the content is in front of the method. //Whether it's a selector expression or a tag created as a tag //It will be inserted at the end of the target container. $('<div class="appendTo">adopt appendTo Elements added by methods</div>').appendTo($(".content")) }) </script> </body> </html>
A brief summary:
Appnd () and. appendTo() have the same functions, but the main difference is the grammar - the location of the content and the target is different.
append() is preceded by the inserted object, followed by the element content to be inserted within the object. appendTo() is preceded by the element content to be inserted, followed by the inserted object.
2. Insert prepend() and prependTo() inside DOM
In addition to inserting the specified content through append and appendTo at the end of the selected element (which is still inside), the method to operate inside the element can also be inserted before the selected element. The method provided by jQuery is prepend and prependTo.
| selector | describe |
| prepend() |
Insert content at the beginning of the selected element |
| prependTo() |
Preposition all matched elements to the specified set of elements Tip: Reversed prepend() |
The use and difference of prepend and prependTo:
The. prepend() method inserts the specified element into the matching element as its first child (if inserted as the last child). append ().
prepend() and. prependTo() achieve the same function, the main difference is the grammar, the content of the insert and the location of the target are different.
For. prepend(), the selector expression is written in front of the method as a container for the content to be inserted, and the content to be inserted as a parameter of the method.
On the contrary, prependTo() writes the content to be inserted in front of the method, which can be a selector expression or a dynamically created tag, with the container of the content to be inserted as a parameter.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .aaron1{ border: 1px solid red; } .aaron1 p { color: red; } .aaron2{ border: 1px solid blue; } .aaron2 p { color: blue; } </style> </head> <body> <h2>adopt prepend and prependTo Additive elements</h2> <button id="bt1">Click through jQuery Of prepend Additive elements</button> <button id="bt2">Click through jQuery Of prependTo Additive elements</button> <div class="aaron1"> <p>test prepend</p> </div> <div class="aaron2"> <p>test prependTo</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //find class="aaron1"Of div node //Then pass prepend Add a new one to the internal header p node $('.aaron1') .prepend('<p>prepend Increased p element</p>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //find class="aaron2"Of div node //Then pass prependTo Add a new header inside p node $('<p>prependTo Increased p element</p>') .prependTo($('.aaron2')) }) </script> </body> </html>
Summarize the differences among the four methods of internal operation:
append() appends content to each matching element prepend() prepends the internal content of each matching element appendTo() appends all matching elements to another set of specified elements prependTo() prepends all matched elements to another specified set of elements