jquery Add Delete Dom element method detailed _jquery

The example in this article analyzes jquery's method of adding a delete DOM element. Share to everyone for your reference, specific as follows:

Introduced

DOM is the abbreviation for document Object Modeule, in general, the DOM operation is divided into 3 aspects.

1. DOM Core

Dom Core is not specifically JavaScript, and can be used by any programming language that supports DOM, much more than just web pages, and can be used to process any document written in markup language, such as XML.
For example: Document,getelementsbytagname ("form");//Use DOM core to get the form object's method.

2, Html-dom

When scripting HTML files with JavaScript and DOM, there are many html-dom attributes, html-dom appear even earlier than Dom core, and he provides some more concise notation to describe the attributes of various HTML elements.
For example:

Copy Code code as follows:

Document.forms//html-dom provides a forms object.

PS: Can be seen, get objects, attributes that can be used to achieve the DOM core people, can also be implemented with Html-dom.

3, Css-dom

Css-dom is a CSS-oriented operation, in JavaScript, css-dom the main role is to get and set the properties of the style object, so that the Web page presents a variety of different effects.

For example:

Copy Code code as follows:

Element.style.color= "Red";//sets the method for the font color of an element.

Common methods

1. Find element node

Copy Code code as follows:

var $li = $ ("ul li:eq (0)")//Get the first Li under the UL Mark, also can write $ ("#ulID li:eq (0)");

2. Find element attributes

Using the attr () method of jquery to get the values of the various attributes of an element, the attr () method can be either one or two arguments.

When the argument is one, it is the name of the property to query.

When the argument is two, you can set the value of the property.

Alert ($ ("#id"). attr ("title"); The title property of the output element. A parameter
$ ("#id"). attr ("title", "Change title value");//Change the Title property value of the element. Two parameters

3. Adding ELEMENT nodes

$ (HTML) simple explanation the $ (HTML) method creates a DOM object based on the incoming HTML tag string and wraps the DOM object back into a jquery object, in short, putting all the markup HTML code into the $ () factory!

Cases:

var $htmlLi = $ ("<li title= ' banana ' > Banana </li>"); Create Dom Object
var $ul = $ ("ul");  Get the UL object
$ul. Append ($htmlLi);//Append $htmlli to the Li list of $ul elements

The following list of methods for inserting nodes

Method	Describe	Example
Append ()	Append content to each matching element	HTML Code <ul></ul> JQuery Code $ ("ul"). Append ("<li>AA</li>"); Results <ul> <li>AA</li> </ul>
Appendto ()	This method and append () a.append (b) b appended to a appendto () b a	html code <ul></ul> jquery code Span lang= "en-US" >$ ("<li>AA</li>"). Appendto ("ul"). results <ul> <li>aa</li> </ul>
prepend ()		html code <p> haha </p> code $ ("P"). Prepend ("<b>ABC</b>"); results <P><B>ABC</B> haha </p>
Prependto ()	the method and prepend () instead, A. Prepend (b) is to place b in front of A, while prependto () is B forward to a	html code <p> haha </p> code $ ("<b>ABC</b>"). Prependto. ("P"); results <P><B>ABC</B> haha </p>
after ()	" Span mso-hansi-font-familytimes= "roman=" "new=" "times=" "insert content after each matching element, after	html code <p>aaa</p> jquery code The $ ("P"). After ("<b>cc</b>"); results <p>aaa</p><b>cc</b>
insertafter ()	and after ()	html code Span lang= "en-us" ><p>aaa</p> jquery code $ (" <b>cc</b> "). After ("P"); results <p>aaa</p><b>cc</b>
before ()	html code <p>aaa</p> Span lang= "en-US" >jquery code The $ ("P"). Before ("<b>cc</b>"); results <b>cc</b><p>aaa</p>
InsertBefore ()	and before () instead	HTML Code <p>AAA</p> JQuery Code $ ("<b>cc</b>"). InsertBefore ("P"); Results <b>cc</b><p>AAA</p>

All right, no fasting, try it yourself:

4. Delete element node

Because we need to constantly change the DOM elements dynamically, jquery provides two ways to delete nodes, namely, remove () and empty ();

4.1 Remove () method

$ ("P"). Remove ();//We can get the element to be deleted, and then call the Remove () method
$ ("ul li:eq (0)"). Remove (). Appendto ("ul");/remove UL below the first Li Mark, Then add the deleted Li tag back to the UL, remove () method to return the deletion of the elements of the reference, then you can continue to use
the $ ("ul Li"). Remove ("li[title!=abc]"); Remove can accept the selective deletion of qualified elements through parameters;

4.2 Empty () method

Strictly speaking, the empty () method is not to delete elements, but to empty

Cases:

HTML code:

<ul>
<li title= "AAA" >AAA</li>
</ul>

jquery Code:

Copy Code code as follows:

$ ("ul li:eq (0)"). empty ();

Results

<ul>
<li title= "AAA" ></li>
</ul>

Remember, only the content will be emptied, not empty attributes;

More about jquery operations DOM elements interested readers can view the site topics: "JQuery Operations Dom node method summary"

I hope this article will help you with the jquery program design.