jquery Operation Dom

Text (), HTML () is a relatively rugged method of directly reading or setting the contents of an element;

Some of the more detailed operations are the addition and deletion of a jquery object.

There are few replacement nodes and parcel nodes that are used later.

1, text (), HTML ()

(1) Use the HTML () method to read or set the innerHTML of the element

(2) Use the text () method to read or set the innertext of the element

2. Dynamically create and add and delete DOM nodes

2.1. Creating a DOM node

Use $ (HTML string) to create a DOM node, return a jquery object, and then call append to add the newly created node to the DOM. $ () creates a jquery object that can be fully manipulated

Create radio, use $ (' <input name= ""/> '), and do not set name through attr (' name ', ' gender ')//via attr (' * * ') after creation, there is a problem under IE6

2.2. Adding and removing DOM nodes

The append method is used to append an element to the end of the element (the last child node)

prepend, adding elements at the beginning of the element (first child node)

after elements are added after an element

before adding elements before an element

Other append methods (append themselves to an element)

child element. AppendTo (parent element);

Active Append to Last

child element. Prependto (parent Element)

Active Append to First

A.insertbefore(B)

Add a to front B, equivalent to B.before (a)

X.InsertAfter(Y)

Append X to the back of Y, equivalent to Y.after (x)

Delete a node

Empty () empties all child nodes under an element

Internal implementation: while (Ele.firstchild) {ele.removechild (ele.firstchild);}

Remove (selector) Deletes the current element, and the returned value is the deleted element. You can also continue to use the node that was deleted. such as re-adding to other nodes.

2.3. Case

Example: Creating a Layer

<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/86/B3/wKioL1fH6tHC9ZNmAACTCBVP_ZA842.gif "title=" Create a layer. gif "alt=" Wkiol1fh6thc9znmaactcbvp_za842.gif "/>

Example: Fetching data from JSON, creating a table dynamically
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/86/B3/wKiom1fH62bgyR6QAAEhWYMYulc569.gif "title=" Dynamically create a table. gif "alt=" Wkiom1fh62bgyr6qaaehwymyulc569.gif "/>

Example: No refresh Comment
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/86/B3/wKiom1fH7KGhFxd5AAL0YSTlKeU499.gif "title=" No refresh comments. gif "alt=" Wkiom1fh7kghfxd5aal0ystlkeu499.gif "/>

Example: Deleting an element
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/86/B3/wKioL1fH7gDSiwUdAACV5KPBqE4058.gif "title=" Delete element. gif "alt=" Wkiol1fh7gdsiwudaacv5kpbqe4058.gif "/>

Example: Permission selection case: One drop-down box option is placed in another drop-down list box option
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/86/B4/wKiom1fH7u-h9xtyAAKF8qwYQ8c523.gif "title=" permissions. gif "alt=" Wkiom1fh7u-h9xtyaakf8qwyq8c523.gif "/>

3. Replace node and parcel node
3.1. Replace node
$ ("BR"). ReplaceWith ("
Replace BR with 
$ (' <br/> '). ReplaceAll (' hr ');
Replace all HR with the <br/> element
The caller also has to be the element selected by the selector.
3.2. Parcel node
The Wrap () method is used to wrap all elements individually with the specified label
Wrapall ()
Wrapinner ()//in the inner circle






jquery Operation Dom