How to implement jquery element append and delete _jquery

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, 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: element.style.color= "red";//the method of setting the font color of an element.

Common methods

1. Find element node

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 the title value"); Change the Title property value of an 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 a DOM object
var $ul = $ ("ul");/Get 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 () Attention to the case, I did not pass the test appendto.	In contrast to Append (), A.append (b) appends B to a, while Appendto () pursues B in a	HTML code <ul></ul> jquery Code $ ("<li>AA</li>"). Appendto ("ul").; Results <ul> <li>AA</li> </ul>
Prepend ()	Forward content to each matching element	HTML code <p> haha </p> jquery Code $ ("P"). Prepend ("<b>ABC</b>"); Results <p><b>ABC</b> haha </p>
Prependto ()	In contrast to prepend (), A. Prepend (b) is to place B in front of a, and prependto () is to place B in front of a	HTML code <p> haha </p> jquery Code $ ("<b>ABC</b>"). Prependto. ("P"); Results <p><b>ABC</b> haha </p>
After ()	Inserts the content after each matching element, after which	HTML code <p>AAA</p> jquery Code $ ("P"). After ("<b>cc</b>"); Results <p>AAA</p><b>cc</b>
InsertAfter ()	And after () on the contrary	HTML code <p>AAA</p> jquery Code $ ("<b>cc</b>"). After ("P"); Results <p>AAA</p><b>cc</b>
Before ()	Insert content before each matching element	HTML code <p>AAA</p> jquery Code $ ("P"). Before ("<b>cc</b>"); Results <b>cc</b><p>AAA</p>
InsertBefore ()	Contrary to the before ()	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 call the Remove () method

$ ("ul li:eq (0)"). Remove (). Appendto ("ul");//delete the first Li Mark below UL, then add the deleted Li Mark to the UL, remove () method returns the reference of deletion element, then you can continue to use

$ ("ul Li"). Remove ("li[title!=abc]");//remove can accept selective deletion of eligible 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

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

Results

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

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

Above this jquery element append and deletes the realization method is the small series to share to everybody's content, hoped can give everybody a reference, also hoped that everybody supports the cloud habitat community.