jQuery（四）（DOM一）

jQuery把复杂的代码简单化。

如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了

一、DOM节点的创建：
创建div节点元素的属性和创建div节点元素的样式
document.createElement //创建节点
setAttribute //设置属性
innerHTML //添加文本
appendChild //加入文档
//缺点：
每一个元素节点都必须单独创建
节点是属性需要单独设置，而且设置的接口不是很统一
添加到指定的元素位置不灵活
最后还有一个最重要的：浏览器兼容问题处理

 $(function () {

     var $body = $('body');

     //创建节点

     $body.append($('<div></div>'));

     //创建文本节点

     $body.append("<div>我是文本</div>");

     //创建属性节点

     $body.append('<div id="test" class="red">我是属性节点</div>');

     //同时创建多个节点

     $body.append('<div id="div1">div1<div id="div2">div2</div></div>');

 });

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

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

加到B中。

 $(function () {

     var $p = $('p');

     $p.after('<div>I love programming.</div>');//01.png

     $p.before('<h1>Message</h1>');

     $p.prepend('<b>Excuse me, </b>');//02.png

     $p.prependTo('#paragraph_wrapper');//03.png

     $p.insertAfter('#paragraph_wrapper');//04.png

     $p.insertBefore('#paragraph_wrapper');

 });

巴特西

jQuery（四）（DOM一）

最新文章

热门文章