jquery Action Elements

Typically, when we create an element, we use the following code:

var p = document.createelement ("P");p. InnerText = "This is param";d ocument.getelementbyid ("Dv1"). AppendChild (P);

This element is added to another element by means of the AppendChild method.

Occasionally, we use one of the following methods to create elements for simplicity and convenience:

document.getElementById ("Dv1"). InnerHTML = "<p>this is a param</p>";

In the code above, we also created an element dynamically and added that element to the DIV, but what we want to say is that this method is wrong for the following reasons:

1. Changes the structure of the page when the page is loaded. In IE6, if the network slows down or the page content is too much, a "terminate operation" error occurs.

2. Use to modify HTML content to add elements that do not conform to the DOM standard. In practice, the browser does not immediately display the status of the added element when this method is used.

Therefore, we should abandon this programming method, adopt the correct, common method to create the element.

Create a new element

Two ways to create elements correctly are described below.

1. Creating elements using the HTML DOM

var p = document.createelement ("P");p. InnerText = "This is param";

2. Creating elements using the jquery function

$ ("<p>this is a param</p>")

Here we use one of the methods in the JQuery Core class library:

JQuery (html,ownerdocument) Return:jquery dynamically creates DOM elements based on HTML raw strings.

Here, we should note that if a complete HTML string is passed in, jquery is also used internally by innerHTML. So, let's see another way to create an element

Note://    do not write $ ("P"). HTML ("This is a Param"), $ ("<p/>"). HTML ("This is a Param");

Adding elements to an object

When adding elements, we should note that the structure of the DOM should be modified only after the page has loaded the elements, or at least when the element that needs to be modified is loaded and then modified.

We can use the following two methods to add elements to the DOM

Window.onload = function () {    var p = document.createelement ("P");    p.innerhtml = "This is a param";    document.getElementById ("Dv1"). AppendChild (P);}

The disadvantage of this code is that the load behavior is performed after the page has been loaded, i.e. we may wait long if there is a large number of images or many resources on the page.

The workaround is that we add behavior to the DOM element after it has been loaded. The jquery function implements this function:

$ (function () {     var p = document.createelement ("P");    p.innerhtml = "This is a param";    document.getElementById ("Dv1"). AppendChild (P);});

Common functions

Commonly used functions are more, according to the classification of the Help document, we have one to understand the function of the use of methods.

1. Internal insertion

Name of function	Describe	Example	Results
Append (content)	Append content to each matching element	$ ("#dv1"). Append ("<b>this is append</b>");	Use the following styles: div{ Display:inline; Border:solid 1px silver; margin:2px; line-height:25px;} Use the effect as follows:
Prepend (content)	Internal front content to each matched element	$ ("#dv2"). Prepend ("<b>this is prepend</b>");
AppendTo (content)	Appends all matching elements to another specified set of elements	$ ("<b>this is Appendto</b>"). AppendTo ($ ("#dv3"));
Prependto (content)	Place each matched element in front of another specified element collection	$ ("<b>this is Prependto</b>"). Prependto ($ ("#dv4"));

Attention:

All of the above methods operate inside an element, append is added to the inside of the element, and Prepend is added to the front of the element.

Both append and prepend are subject A to add B, while Appendto and Prependto are both added to the a body.

2. External insertion

Name of function	Describe	Example	Results
After (content)	Insert content after each matched element	$ ("#dv1"). Before ("<b>this is before</b>");	Use the following styles: div{ Display:inline; Border:solid 1px silver; margin:2px; line-height:25px;} The effect is as follows:
Before (content)	Insert content before each matching element	$ ("#dv2"). After ("<b>this is after</b>");
InsertAfter (content)	Inserts all matching elements after the specified collection of elements	$ ("<b>this is Insertafter</b>"). InsertAfter ($ ("#dv3"));
InsertBefore (content)	Inserts all matching elements in front of the specified collection of elements	$ ("<b>this is Insertbefore</b>"). InsertBefore ($ ("#dv4"));

3. Parcel

Name of function	Describe	Example	Note
Wrap (Elem)	Wrap the matching elements in a structured tag that matches other elements	$ ("B"). Wrap ($ ("div"));	Generate Source code: <div> <b>this is b1</b></div><div> <b>this is b2</b></div> <div>
Wrap (HTML)	Wrap the matching elements in a structured tag that matches other elements	$ ("B"). Wrap ("<div></div>");
Wrapall (Elem)	Match all matching elements with a single element	$ ("B"). Wrapall ($ ("div"));	Generate Source code: <DIV> <b>this is b1</b> <b>this is b2</b> </DIV>
Wrapall (HTML)	Match all matching elements with a single element	$ ("B"). Wrapall ("<div></div>");
Wrapinner (Elem)	Wraps the contents of the matched element in a DOM element.	$ ("P"). Wrapinner ($ ("B"));	<p> <b>this is p1</b></p>
Wrapinner (HTML)	Wraps the contents of the matched element in a DOM element.	$ ("P"). Wrapinner ("<b></b>");

Attention:

Wrap,wrapall,wrapinner the difference between the three of them.

Wrap is a formatting tag that is wrapped for each matching element.

Wrapall is to wrap all matching elements in a format tag.

4. Replace

Name of function	Describe	Example	Note
ReplaceAll (selector)	Replace all selector matched elements with matching elements	$ ("<p>this is Param</p>"). ReplaceAll ($ ("B"));
ReplaceWith (content)	Replaces the matched element with the specified HTML or DOM element	$ ("B"). ReplaceWith ("<p>this is param</p>");

Attention:

These two functions are similar to append and appendto.

ReplaceAll is a set of B elements that satisfies the condition of a-element set substitution matching

ReplaceWith (content) is a set of elements that is replaced by the content element set

5. Delete

Name of function	Describe	Example	Note
Empty ()	Delete all child nodes of a matching collection	<div id= "Dv1" > dv1<p> this is a param</p></div><div> dv2</div>< B>this is B</b><script type= "Text/javascript" > $ ("div"). Empty ();</script>	Clears all child elements under the div. Page Source: <div id= "Dv1" ></div><div></div><b>this is b</b>
Remove ([expr])	Remove all matching elements from the DOM Expr: jquery expression for filtering elements	<div id= "Dv1" > dv1<p> this is a param</p></div><div> dv2</div>< B>this is B</b><script type= "Text/javascript" > $ ("div"). Remove ();</script>	Delete all the div from the page Page Source: <b>this is b</b>

6. Copying

function name	description	example	result
clone ()	clone matching elements and select copies of these clones	<div id= "Dv1" >dv1</div><b This is B</b><script type= "text/ JavaScript "> $ (" B "). Clone (). InsertBefore ($ (" #dv1 ")); </script>	& nbsp;
	clone the matched element and all its events, and select a copy of those clones	< Pre><div id= "Dv1" >dv1</div><b onclick= "alert (this.innerhtml)" >this is B</b><script type= "Text/javascript" > $ ("B"). Clone (True). InsertBefore ($ ("#dv1")); </script>

--Choose from the zero-based learning of jquery

jquery Action Elements