1 动态创建节点


1-1 通过jsp最原生的方法来创建节点

详细说明请查看点击此处查看


<!DOCTYPEhtml><html><head><metahttp-equiv="Content-type"content="text/html;charset=utf-8"/><title>这是使用jquery的第一个案例</title><style>.hh{width:200px;height:100px;padding:10px;margin:5px;float:left;border:2pxsolid#ccc;background:#bbffaa;}</style></head><body><h2>动态创建div节点</h2><!--创建div标签并引用我们定义的样式--><divclass="hh"><divclass="addDiv">点击页面会动态创建元素节点</div></div><scripttype="text/javascript">//从DOM选取元素varbody=document.querySelector('body');//为document添加点击事件document.addEventListener('click',function(){//创建两个divvardiv1=document.createElement('div')vardiv2=document.createElement("div");//设置属性div1.setAttribute('class','hh')div2.className='addDiv'//向div中添加文本div2.innerHTML="动态创建div";//设置加入文档，也就是包含关系div1.appendChild(div2)body.appendChild(div1)},false)</script></body></html>


效果图： 1-1


1-2 通过jQuery方法来创建节点


常用的方法就是通过$(" html 结构 ") 这样的函数结构进行处理


<DOMTYPEhtml><html><head><metahttp-equiv="Content-type"content="text/html;charset=utf-8"/><scriptsrc="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><style>.div_style{width:200px;height:100px;padding:5px;margin:10px;float:left;border:2pxsolid#ccc;background:yellow;}</style></head><body><divclass="div_style"><divclass="child">通过jquery来添加div</div></div><scripttype="text/javascript">var$body=$('body');$body.on('click',function(){vardiv=$("<divclass='div_style'><divclass='child'>动态创建div</div></div>");$body.append(div);});</script></body></html>




2 jQuery内部插入append()与appendTo()

动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。将创建的元素放到文档上，

这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法


append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

2-1 .append()和.appendTo() 方法的不同之处

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同

append()前面是要选择的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是要选择的对象

<!DOCTYPEhtml><html><head><title>addDiv2.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="thisismypage"><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><!--添加依赖库--><scriptsrc="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><!--<linkrel="stylesheet"type="text/css"href="./styles.css">--><styletype="text/css">.content{width:300px;height:100px;}/*通过append方法来添加的节点使用的样式*/.append{background-color:blue;margin-top:10px;}/*通过appendTo方法来添加的节点使用的样式*/.appendTo{background-color:red;margin-top:5px;}</style></head><body>ThisismyHTMLpage.<br><h3>通过append与appendTo添加元素</h3><buttonid="bt1">点击通过jQuery的append添加元素</button><buttonid="bt2">点击通过jQuery的appendTo添加元素</button><!--添加div的位置--><divclass="content"></div><scripttype="text/javascript">$("#bt1").on('click',function(){$(".content").append('<divclass="append">通过append方法添加的元素</div>');});</script><scripttype="text/javascript">$("#bt2").on('click',function(){$('<divclass="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"));});</script></body></html>


效果图 9-1


3 jQuery外部插入after()与before()

before与after都是用来对相对选中元素外部增加相邻的兄弟节点

2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

注意点：

after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入

before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插



<!DOCTYPEhtml><html><head><title>addDiv3.html</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="thisismypage"><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><!--<linkrel="stylesheet"type="text/css"href="./styles.css">--><!--添加依赖库--><scriptsrc="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><style>/*点击通过jQuery的before添加元素显示框使用样式*/.contentBefore{border:2pxsolidred;margin-top:5px;}/*点击通过jQuery的after添加元素显示区域使用样式*/.contentAfter{border:2pxsolid#e6e6e6;margin-top:5px;}</style></head><body>ThisismyHTMLpage.<br><h3>通过before与after添加元素</h3><buttonid="bt1">点击通过jQuery的before添加元素</button><buttonid="bt2">点击通过jQuery的after添加元素</button><divclass="contentBefore"><pclass="test1">测试before</p></div><divclass="contentAfter"><pclass="test2">测试after</p></div><scripttype="text/javascript">$("#bt1").on('click',function(){//在匹配test1元素集合中的每个元素前面插入p元素$(".test1").before('<p>before,在匹配元素之前增加</p>','<p>多参数</p>')})</script><scripttype="text/javascript">$("#bt2").on('click',function(){//在匹配test1元素集合中的每个元素后面插入p元素$(".test2").after('<p>after,在匹配元素之后增加</p>','<p>多参数</p>')})</script></body></html>



效果图： 10-1