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');
});