jquery-creating elements and adding child elements

First, create a new element
1. Create a new element using the $ function
var $newElement =$ (' <div><p> paragraph </p></div> ');//create element, return jquery object
Description
1) Creating new elements does not automatically insert new elements into the page, we also need to explicitly specify where they are inserted into the page (for example, using the Append method, specifying
Its insertion position is the last child element of an element)
2) The returned JQuery object contains only the topmost (outer) element of the HTML fragment, and for descendant elements we can work with elements that are already in the page, using the
Children or Find method accessthat is, alert ($newElement); The result should be 1 .
3) Now that you can insert HTML elements directly apend and so on, why do you have this ability to create new elements?
Using the $ function to create the element, is to return the jquery object, we can use the method inside the jquery object to create this element before it is inserted into the page
Various operations such as the binding event handler function!
2. Clone an existing element (create a new element by cloning an existing element)
Use the Clone method to create a new element for a mold with an existing element (or a newly created element)
The Clone method copies all elements within the JQuery object that contain descendant elements
Parameters:
Two parameters are optional
First parameter:
A Boolean value (TRUE or false) indicating whether the event handler for the target element and the associated data are copied
The second parameter (by default, is the same as the first parameter):
A Boolean value that indicates whether the event handlers and associated data for all child elements of the cloned element are copied
Second, add child elements
1. Append method
Within each matching element.at the endInsert parameter Contents
Parameter type description:
1) Normal string (can contain various HTML tags)
$ (' body '). Append (' HTML string ');
2) JQuery Object
① new element created with the $ function (jquery object)
② using the $ function to get the elements already in the page (jquery objects)
　　　　 The existing element is moved to the target element, which is cut

1 <script type= "Text/javascript" >     2     $ (function() {  3             $getParagraph =$ ("P");//After the P-paragraph is run, it becomes a sub-element of Div 4             $ ("#oo"). Append ($getParagraph); 5         }  6    ); 7 </script> 8  9 <p> paragraph </p> <div id= "oo" >div< /div>

③ using the Clone method to clone an existing element in a page (jquery object)

$getParagraph =$ ("P"). Clone ();//This avoids the P-paragraph becoming a sub-element of the Div

　　3) HTML element object, HTML element object array

= = = parameter of the above type can be passed in more than one, each parameter will be inserted into the matching element! ===
4) function
How many matches are there, and how many times this function executes!
The function can accept two parameters: the first is the ordinal of the current element, and the second is the HTML within the current element.
Inside the function this represents the current HTML element object
The return data is the inserted content (which can be an HTML element or a jquery object)
2. Prepend method
Inserts the contents of the parameter into the front of each matching element
Using the same method and parameters as the Append

3. Appendto method
Inserts a matching element into the last face inside the target element (same as Append)
Differences from Append:
The position of the target element and the inserted content are reversed when used
Creates a new element that returns the JQuery object associated with the
This method can be called by a jquery object that has elements returned from the selected page (selecting an existing element in the page means moving an existing element inside the target element)!
Parameter (indicates the target location to insert the element):
Selector or jquery object or HTML element object/html element Object array
4. Prependto method
Inserts a matched element into the front of the target element (same as prepend)
Differences from Prepend:
Ditto!
Parameter (indicates the target location to insert the element):
Ditto!

jquery-creating elements and adding child elements