标签：
DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、
插入、替换、克隆、删除等等一些列的元素操作。
创建节点
为了使页面更加智能化，有时我们想动态的在html结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点操作</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>
创建一个节点：
var box = $("<div id=‘box‘>节点</div>"); //创建节点
将节点插入到<body>元素内部：
$("body").append(box); //插入节点
插入节点
在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery提供了其他几个方法来插入节点。
内部插入节点
| 方法名 | 描述 |
| append(content) | 向指定元素内部后面插入节点content |
| append(function(index,html) {}) | 使用匿名函数向指定元素内部后面插入节点 |
| appendTo(content) | 将指定元素移入到指定元素content内部后面 |
| prepend(content) | 向指定元素content内部的前面插入节点 |
| prepend(function(index,html) {}) | 使用匿名函数向指定元素内部的前面插入节点 |
| prependTo(content) | 将指定元素移入到指定元素content内部前面 |
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点操作</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div>节点</div> <strong>DOM</strong> </body> </html>
jQuery代码如下：
append：
$("div").append("<strong>DOM</strong>"); //向div内部插入strong节点
$("div").append(function(index,html) { //使用匿名函数插入节点，html是原节点
return "<strong>DOM</strong>" + index + html;
});
$("strong").appendTo("div"); //将strong节点移入div节点内，移入操作，不需要创建节点
prepend：
$("div").prepend("<strong>DOM</strong>"); //将strong插入到div内部的前面
$("div").prepend(function(index,html) { //使用匿名函数，同上
return "<strong>DOM</strong>" + index + html;
});
$("strong").prependTo("div"); //将strong移入div内部的前面
外部插入节点
| 方法名 | 描述 |
| after(content) | 向指定元素的外部后面插入节点content |
| after(function(index,html) {}) | 使用匿名函数向指定元素的外部后面插入节点 |
| before(content) | 向指定元素的外部前面插入节点content |
| before(function(index,html) {}) | 使用匿名函数向指定元素的外部前面插入节点 |
| insertAfter(content) | 将指定节点移到指定元素content外部的后面 |
| insertBefore(content) | 将指定节点移到指定元素content外部的前面 |
html代码还是同上。
jQuery代码如下：
$("div").after("<strong>DOM1</strong>"); //向div的同级节点后面插入strong
$("div").after(function(index,html) { //使用匿名函数，同上
return "<strong>DOM</strong>" + index + html;
});
$("div").before("<strong>DOM1</strong>"); //向div的同级节点前面插入strong
$("div").before(function(index,html) { //使用匿名函数，同上
return "<strong>DOM</strong>" + index + html;
});
$("strong").insertAfter("div"); //将strong元素移到div元素外部的后面
$("strong").insertBefore("div"); //将strong元素移到div元素外部的前面
标签：
原文地址：http://www.cnblogs.com/yerenyuan/p/5424668.html
