标签：
通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。
试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了
本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。
先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）
创建流程比较简单，大体如下：
流程中涉及的一点方法：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> </head> <body> <h2>动态创建元素节点</h2> <div class="left"> <div class="aaron">点击body区域会动态创建元素节点</div> </div> <script type="text/javascript"> var body = document.querySelector(‘body‘); document.addEventListener(‘click‘,function(){ //创建2个div元素 var rightdiv = document.createElement(‘div‘) var rightaaron = document.createElement("div"); //给2个div设置不同的属性 rightdiv.setAttribute(‘class‘, ‘right‘) rightaaron.className = ‘aaron‘ rightaaron.innerHTML = "动态创建DIV元素节点"; //2个div合并成包含关系 rightdiv.appendChild(rightaaron) //绘制到页面body body.appendChild(rightdiv) },false) </script> </body> </html>
如上面代码所示，写一个最简单的元素创建，我们会发现几个问题：
针对这一系列的DOM操作的问题，jQuery给出了一套非常完美的接口方法，我们之后就开始深入学习
上一节介绍了通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程
创建元素节点：
可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")
$("<div></div>")
创建为本节点：
与创建元素节点类似，可以直接把文本内容一并描述
$("<div>我是文本节点</div>")
创建为属性节点：
与创建元素节点同样的方式
$("<div id=‘test‘ class=‘aaron‘>我是文本节点</div>")
我们通过jQuery把上一届的代码改造一下，如下面代码所示：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 .left, 10 .right { 11 width: 300px; 12 height: 120px; 13 } 14 15 .left div, 16 .right div { 17 width: 100px; 18 height: 90px; 19 padding: 5px; 20 margin: 5px; 21 float: left; 22 border: 1px solid #ccc; 23 } 24 25 .left div { 26 background: #bbffaa; 27 } 28 29 .right div { 30 background: yellow; 31 } 32 </style> 33 </head> 34 35 <body> 36 <h2>动态创建元素节点</h2> 37 <button>点击通过jQuery动态创建元素节点</button> 38 <script type="text/javascript"> 39 var $body = $(‘body‘); 40 $body.on(‘click‘, function() { 41 //通过jQuery生成div元素节点 42 var div = $("<div class=‘right‘><div class=‘aaron‘>动态创建DIV元素节点</div></div>") 43 $body.append(div) 44 }) 45 46 47 48 // var body = document.querySelector(‘body‘); 49 50 // document.addEventListener(‘click‘,function(){ 51 52 // //创建2个div元素 53 // var rightdiv = document.createElement(‘div‘) 54 // var rightaaron = document.createElement("div"); 55 56 // //给2个div设置不同的属性 57 // rightdiv.setAttribute(‘class‘, ‘right‘) 58 // rightaaron.className = ‘aaron‘ 59 // rightaaron.innerHTML = "动态创建DIV元素节点"; 60 61 // //2个div合并成包含关系 62 // rightdiv.appendChild(rightaaron) 63 64 // //绘制到页面body 65 // body.appendChild(rightdiv) 66 67 // },false) 68 </script> 69 </body> 70 71 </html>
一条一句就搞定了，跟写HTML结构方式是一样的
$("<div class=‘right‘><div class=‘aaron‘>动态创建DIV元素节点</div></div>")
（注意：点击事件是绑定在body上的，点击body的任意地方都是可以新增div的。注意body是有高度的，点击空白的地方没有效果是因为body高度没有那么高）
这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活。
动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？
这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法
append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
简单的总结就是：
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
append()前面是要选择的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是要选择的对象
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 7 <style> 8 .content { 9 width: 300px; 10 } 11 .append{ 12 background-color: blue; 13 } 14 .appendTo{ 15 background-color: red; 16 } 17 </style> 18 </head> 19 20 <body> 21 <h2>通过append与appendTo添加元素</h2> 22 <button id="bt1">点击通过jQuery的append添加元素</button> 23 <button id="bt2">点击通过jQuery的appendTo添加元素</button> 24 <div class="content"></div> 25 <script type="text/javascript"> 26 27 $("#bt1").on(‘click‘, function() { 28 //.append(), 选择表达式在函数的前面， 29 //参数是将要插入的内容。 30 $(".content").append(‘<div class="append">通过append方法添加的元素</div>‘) 31 }) 32 33 </script> 34 <script type="text/javascript"> 35 36 $("#bt2").on(‘click‘, function() { 37 //.appendTo()刚好相反，内容在方法前面， 38 //无论是一个选择器表达式 或创建作为标记上的标记 39 //它都将被插入到目标容器的末尾。 40 $(‘<div class="appendTo">通过appendTo方法添加的元素</div>‘).appendTo($(".content")) 41 }) 42 43 </script> 44 </body> 45 </html>
节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容
选择器的描述：
注意点：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 .aaron{ 10 border: 1px solid red; 11 } 12 </style> 13 </head> 14 15 <body> 16 <h2>通过before与after添加元素</h2> 17 <button id="bt1">点击通过jQuery的before添加元素</button> 18 <button id="bt2">点击通过jQuery的after添加元素</button> 19 <div class="aaron"> 20 <p class="test1">测试before</p> 21 </div> 22 <div class="aaron"> 23 <p class="test2">测试after</p> 24 </div> 25 <script type="text/javascript"> 26 $("#bt1").on(‘click‘, function() { 27 //在匹配test1元素集合中的每个元素前面插入p元素 28 $(".test1").before(‘<p style="color:red">before,在匹配元素之前增加</p>‘, ‘<p style="color:red">多参数</p>‘) 29 }) 30 </script> 31 <script type="text/javascript"> 32 $("#bt2").on(‘click‘, function() { 33 //在匹配test1元素集合中的每个元素后面插入p元素 34 $(".test2").after(‘<p style="color:blue">after,在匹配元素之后增加</p>‘, ‘<p style="color:blue">多参数</p>‘) 35 36 }) 37 </script> 38 </body>
在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo
选择器的描述：
通过右边代码可以看到prepend与prependTo的使用及区别：
这里总结下内部操作四个方法的区别：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 .aaron1{ 10 border: 1px solid red; 11 } 12 .aaron1 p { 13 color: red; 14 } 15 .aaron2{ 16 border: 1px solid blue; 17 } 18 .aaron2 p { 19 color: blue; 20 } 21 </style> 22 </head> 23 24 <body> 25 <h2>通过prepend与prependTo添加元素</h2> 26 <button id="bt1">点击通过jQuery的prepend添加元素</button> 27 <button id="bt2">点击通过jQuery的prependTo添加元素</button> 28 <div class="aaron1"> 29 <p>测试prepend</p> 30 </div> 31 <div class="aaron2"> 32 <p>测试prependTo</p> 33 </div> 34 <script type="text/javascript"> 35 $("#bt1").on(‘click‘, function() { 36 //找到class="aaron1"的div节点 37 //然后通过prepend在内部的首位置添加一个新的p节点 38 $(‘.aaron1‘) 39 .prepend(‘<p>prepend增加的p元素</p>‘) 40 }) 41 </script> 42 <script type="text/javascript"> 43 $("#bt2").on(‘click‘, function() { 44 //找到class="aaron2"的div节点 45 //然后通过prependTo内部的首位置添加一个新的p节点 46 $(‘<p>prependTo增加的p元素</p>‘) 47 .prependTo($(‘.aaron2‘)) 48 }) 49 </script> 50 </body> 51 52 </html>
与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore
注意事项：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 .test1 { 10 background: #bbffaa; 11 } 12 13 .test2 { 14 background: yellow; 15 } 16 </style> 17 </head> 18 19 <body> 20 <h2>通过insertBefore与insertAfter添加元素</h2> 21 <button id="bt1">点击通过jQuery的insertBefore添加元素</button> 22 <button id="bt2">点击通过jQuery的insertAfter添加元素</button> 23 <div class="aaron"> 24 <p class="test1">测试insertBefore,不支持多参数</p> 25 </div> 26 <div class="aaron"> 27 <p class="test2">测试insertAfter,不支持多参数</p> 28 </div> 29 <script type="text/javascript"> 30 $("#bt1").on(‘click‘, function() { 31 //在test1元素前后插入集合中每个匹配的元素 32 //不支持多参数 33 $(‘<p style="color:red">测试insertBefore方法增加</p>‘, ‘<p style="color:red">多参数</p>‘).insertBefore($(".test1")) 34 }) 35 </script> 36 <script type="text/javascript"> 37 $("#bt2").on(‘click‘, function() { 38 //在test2元素前后插入集合中每个匹配的元素 39 //不支持多参数 40 $(‘<p style="color:red">测试insertAfter方法增加</p>‘, ‘<p style="color:red">多参数</p>‘).insertAfter($(".test2")) 41 }) 42 </script> 43 </body> 44 45 </html>
要移除页面上节点是开发者常见的操作，jQuery提供了几种不同的方法用来处理这个问题，这里我们开仔细了解下empty方法
empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。
这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：
<div class="hello"><p>慕课网</p></div>
如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中
//通过empty处理 $(‘.hello‘).empty() //结果：<p>慕课网</p>被移除 <div class="hello"></div>
可以参考下边的代码区域：
通过empty移除了当前div元素下的所有p元素 但是本身id=test的div元素没有被删除
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 div { 10 background: #bbffaa; 11 width: 300px; 12 } 13 </style> 14 </head> 15 16 <body> 17 <h2>通过empty移除元素</h2> 18 <div id="test"> 19 <p>p元素1</p> 20 <p>p元素2</p> 21 </div> 22 <button>点击通过jQuery的empty移除元素</button> 23 <script type="text/javascript"> 24 $("button").on(‘click‘, function() { 25 //通过empty移除了当前div元素下的所有p元素 26 //但是本身id=test的div元素没有被删除 27 $("#test").empty() 28 }) 29 </script> 30 </body> 31 32 </html>
remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
例如一段节点，绑定点击事件
<div class="hello"><p>慕课网</p></div>
$(‘.hello‘).on("click",fn)
如果不通过remove方法删除这个节点其实也很简单，但是同时需要把事件给销毁掉，这里是为了防止"内存泄漏"，所以前端开发者一定要注意，绑了多少事件，不用的时候一定要记得销毁
通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单
//通过remove处理 $(‘.hello‘).remove() //结果：<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁
remove表达式参数：
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点
我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理
对比下边的代码区域，我们可以通过类似于这样处理
$("p").filter(":contains(‘3‘)").remove()
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 .test1 { 10 background: #bbffaa; 11 } 12 13 .test2 { 14 background: yellow; 15 } 16 </style> 17 </head> 18 19 <body> 20 <h2>通过jQuery remove方法移除元素</h2> 21 <div class="test1"> 22 <p>p元素1</p> 23 <p>p元素2</p> 24 </div> 25 <div class="test2"> 26 <p>p元素3</p> 27 <p>p元素4</p> 28 </div> 29 <button>点击通过jQuery的empty移除元素</button> 30 <button>点击通过jQuery的empty移除指定元素</button> 31 <script type="text/javascript"> 32 $("button:first").on(‘click‘, function() { 33 //删除整个 class=test1的div节点 34 $(".test1").remove() 35 }) 36 37 $("button:last").on(‘click‘, function() { 38 //找到所有p元素中，包含了3的元素 39 //这个也是一个过滤器的处理 40 $("p").remove(":contains(‘3‘)") 41 }) 42 </script> 43 </body> 44 45 </html>
要用到移除指定元素的时候，jQuery提供了empty()与remove([expr])二个方法，两个都是删除元素，但是两者还是有区别
empty方法
remove方法
以上就是二者的区别，我们具体通过下边代码部分加深理解
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 8 <style> 9 .left, 10 .right { 11 width: 300px; 12 } 13 14 .left div, 15 .right div { 16 width: 100px; 17 height: 90px; 18 padding: 5px; 19 margin: 5px; 20 float: left; 21 border: 1px solid #ccc; 22 } 23 24 .left div { 25 background: #bbffaa; 26 } 27 28 .right div { 29 background: yellow; 30 } 31 </style> 32 </head> 33 34 <body> 35 <h2>通过empty与remove移除元素</h2> 36 <div class="left"> 37 <button id="bt1">点击通过jQuery的empty移除内部P元素</button> 38 <button id="bt2">点击通过jQuery的remove移除整个节点</button> 39 </div> 40 <div class="right"> 41 <div id="test1"> 42 <p>p元素1</p> 43 <p>p元素2</p> 44 </div> 45 <div id="test2"> 46 <p>p元素3</p> 47 <p>p元素4</p> 48 </div> 49 </div> 50 <script type="text/javascript"> 51 $("#bt1").on(‘click‘, function() { 52 //删除了2个p元素，但是本着没有删除 53 $("#test1").empty() 54 }) 55 56 $("#bt2").on(‘click‘, function() { 57 //删除整个节点 58 $("#test2").remove() 59 }) 60 </script> 61 </body> 62 63 </html>
如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理
detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。
来看看jquery官方文档的解释：
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。
当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据
参考右边的代码区域，通过 $("p").detach()把所有的P元素元素删除后，在通过append把删除的p放到页面上，可以通过点击文字测试，事件没有丢失
1 <html> 2 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 6 <style type="text/css"> 7 p { 8 color: red; 9 } 10 </style> 11 </head> 12 13 <body> 14 <p>P元素1，默认给绑定一个点击事件</p> 15 <p>P元素2，默认给绑定一个点击事件</p> 16 <button id="bt1">点击删除 p 元素</button> 17 <button id="bt2">点击移动 p 元素</button> 18 <script type="text/javascript"> 19 $(‘p‘).click(function(e) { 20 alert(e.target.innerHTML) 21 }) 22 var p; 23 $("#bt1").click(function() { 24 if (!$("p").length) return; //去重 25 //通过detach方法删除元素 26 //只是页面不可见，但是这个节点还是保存在内存中 27 //数据与事件都不会丢失 28 p = $("p").detach() 29 }); 30 31 $("#bt2").click(function() { 32 //把p元素在添加到页面中 33 //事件还是存在 34 $("body").append(p); 35 }); 36 </script> 37 </body> 38 39 </html>
注意：
if (!$("p").length) return; //去重
判断 p的“存在”否，若不“存在”，则退出函数
JQuery是一个很大强的工具库，在工作中开发中，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。
remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了
通过一张对比表来解释2个方法之间的不同
|
方法名 |
参数 |
事件及数据是否也被移除 |
元素自身是否被移除 |
|
remove |
支持选择器表达 |
是 |
是（无参数时），有参数时要根据参数所涉及的范围 |
|
detach |
参数同remove |
否 |
情况同remove |
remove：移除节点
detach：移除节点
具体可以参考下边的代码区域的对比：
1 <html> 2 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 p{ 7 border: 1px solid red; 8 } 9 </style> 10 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 11 </head> 12 13 <body> 14 <h3>给页面2个p元素节点绑定点击事件,点击后弹出自己本身的节点内容</h3> 15 <p>元素p1，同时绑定点击事件</p> 16 <p>元素p2，同时绑定点击事件</p> 17 <h3>通过点击2个按钮后观察方法处理的区别</h3> 18 <button>点击通过remove处理元素p1</button> 19 <button>点击通过detach处理元素p2</button> 20 </body> 21 <script type="text/javascript"> 22 //给页面上2个p元素都绑定时间 23 $(‘p‘).click(function(e) { 24 alert(e.target.innerHTML) 25 }) 26 27 $("button:first").click(function() { 28 var p = $("p:first").remove(); 29 p.css(‘color‘,‘red‘).text(‘p1通过remove处理后,点击该元素,事件丢失‘) 30 $("body").append(p); 31 }); 32 33 $("button:last").click(function() { 34 var p = $("p:first").detach(); 35 p.css(‘color‘,‘blue‘).text(‘p2通过detach处理后,点击该元素事件存在‘) 36 $("body").append(p); 37 }); 38 </script> 39 </script> 40 41 </html>
标签：
原文地址：http://www.cnblogs.com/Qian123/p/5551138.html
