A very important feature in the DOM is the node model, the "M" in the DOM. The structure of the elements in the page is corresponding to each other through this node model, we only need to pass these node relationships, we can create,
Insert, replace, clone, delete, and so on some column element operation.
Create a node
To make the page more intelligent, sometimes we want to dynamically add an element tag on the HTML structure page, so the first thing to do before inserting is to create the node.
The HTML code is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>DOM node operations</title> <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script> <Scripttype= "Text/javascript"src= "Demo.js"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /></Head><Body> </Body></HTML>
Create a node:
var // Create a node
Insert a node inside the <body> element:
// inserting Nodes
inserting Nodes
In the process of creating a node, we have actually demonstrated how to insert a node by using the. Append () method. But apart from this method, jquery provides several other ways to insert nodes.
Internal Insert Node
| Method name | Describe |
| Append (content) | Inserts a node after a specified element inside the content |
| Append (function (index,html) {}) | To insert a node behind a specified element using an anonymous function |
| AppendTo (content) | Moves the specified element back into the content inside the specified element |
| Prepend (content) | Inserts a node to the front of the content inside the specified element |
| Prepend (function (index,html) {}) | To insert a node in front of a specified element using an anonymous function |
| Prependto (content) | Moves the specified element in front of content inside the specified element |
There are HTML code as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>DOM node operations</title> <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script> <Scripttype= "Text/javascript"src= "Demo.js"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /></Head><Body> <Div>Node</Div> <Strong>Dom</Strong></Body></HTML>
The jquery code is as follows:
Append
// Insert the strong node inside the DIV
$ ("div"). Append (function// use anonymous functions to insert nodes, HTML is the original node return "<strong>dom </strong> "+ index + html;});// Move the strong node into the DIV node, move in, and do not need to create a node
Prepend:
// Insert the strong in front of the div interior
$ ("div"). Prepend (function// use anonymous functions, same as return "<strong>dom</ Strong> "+ index + html;});// move the strong into the front of the div interior
External Insert Node
| Method name | Describe |
| After (content) | Inserts a node after the outside of the specified element content |
| After (function (index,html) {}) | To insert a node behind a specified element using an anonymous function |
| Before (content) | Inserts a node before the outside of the specified element content |
| Before (function (index,html) {}) | To insert a node before the outside of the specified element using an anonymous function |
| InsertAfter (content) | Moves the specified node back to the content outside of the specified element |
| InsertBefore (content) | Moves the specified node to the front of the content outside of the specified element |
The HTML code is also the same as above.
The jquery code is as follows:
// insert strong behind the DIV's sibling node
$ ("div"). After (function// using anonymous functions, return "<strong>dom</strong" > "+ index + html;});// insert Strong before the DIV's sibling node
$ ("div"). Before (function// use anonymous functions, same as return "<strong>dom</ Strong> "+ index + html;});// move the strong element to the back of the DIV element // move the strong element to the front of the DIV element
DOM node operations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
