"Summarize and Organize" jquery Basic Learning---DOM Chapter

Objective:

Introduce some native methods provided by the browser you need to use (not dealing with the low-version IE compatibility problem here)

The creation process is relatively simple and generally follows:

1. Creating nodes (Common: elements, attributes, and text)
2. Add some properties of a node
3. Adding to the document

A little bit of the approach involved in the process:

• Create element: Document.createelement
• Setting Properties: SetAttribute
• Add text: InnerHTML
• Add to Document: AppendChild

As shown in the code on the right, write a simplest element to create, and we'll find a few questions:

1. Each element node must be created separately
2. A node is a property that needs to be set separately, and the interface set is not very uniform
3. Not flexible to add to the specified element location
4. Finally, one of the most important: Browser compatibility problem handling

For this series of DOM operations, jquery gives a very perfect interface approach

JS Native method to create elements:

<script type= "Text/javascript" >varBODY = document.queryselector (' body '); Document.addeventlistener (' Click ',function(){                                //Create 2 div elements                varRightdiv = document.createelement (' div ')                varRightaaron = document.createelement ("div"); //set a different property for 2 DivRightdiv.setattribute (' class ', ' right ') Rightaaron.classname= ' Aaron 'rightaaron.innerhtml= "Create div element node dynamically"; //2 Div merged into a containment relationshiprightdiv.appendchild (Rightaaron)//draw to page bodybody.appendchild (Rightdiv)},false)        </script>

The jquery method creates elements:

$ ("<div class= ' right ' ><div class= ' Aaron ' > dynamically create DIV element nodes </div></div>")

. Append () AppendTo ()

<script type= "Text/javascript" >        $("#bt1"). On (' click ',function() {            //. Append (), content at the back of the method,            //The parameter is the content that will be inserted. $ (". Content"). Append (' <div class= ' append ' > Elements added by append method </div> ')        })    </script> <script type= "Text/javascript" >        $("#bt2"). On (' click ',function() {            //. AppendTo () Just the opposite, the content is in front of the method,            //either a selector expression or a tag that is created as a marker            //it will all be inserted at the end of the target container. $ (' <div class= ' appendTo ' > elements added by AppendTo method </div> '). AppendTo ($ (". Content")))        })    </script>

Dom external insert after () with before ()

There are various relationships between nodes and nodes, except father and son, ancestral relationships, and brotherhood. Before we were dealing with the insertion of a node, we were exposed to several methods of internal insertion, and this section began with the processing of external insertions, the relationship between siblings, where jquery introduced 2 methods that can be used to insert content before and after the element that matches I

Description of the selector:

• Before and after are used to add adjacent sibling nodes to the outside of the selected element
• All 2 methods can receive an HTML string, a DOM element, an array of elements, or a jquery object, used to insert in front of or behind each matching element in the collection
• 2 methods support multiple Parameters pass after (Div1,div2,....) can refer to the right case code

Note the point:

• After the element is added after the HTML code, if there is an element behind the element, then move the following element back, and then insert the HTML code
• Before add HTML code to the front of the element, and if the element is preceded by an element, move the preceding element forward, then insert the HTML code

Inside DOM Insert prepend () and Prependto ()

The method of manipulating inside an element, in addition to inserting the specified content through append and appendto at the end of the selected element (still inside), can also be inserted before the selected element, and jquery provides the method prepend and Prependto

Description of the selector:

You can see the use and difference of prepend and prependto through the right code:

• The. Prepend () method inserts the specified element into the matching element as its first child element (if you want to insert as the last child element with. Append ()).
• . prepend () and. Prependto () to achieve the same functionality, the main difference is the syntax, the inserted content and the location of the target is 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 the parameter of the method
• and. Prependto () on the contrary, the content to be inserted is written in front of the method, either as a selector expression or as a dynamically created tag, as a parameter for the container to insert the content.

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

• Append () appends content to each matching element
• Prepend () internal front content to each matched element
• AppendTo () Appends all matching elements to the collection of another specified element
• Prependto () puts all matching elements in front of another specified set of elements

"Summarize and Organize" jquery Basic Learning---DOM Chapter