jquery节点操作

动态创建元素

• $()函数的另外一个作用：动态创建元素

var $spanNode = $(“我是一个span元素”);

添加元素

• append():在元素的最后一个子元素后面追加元素
• 作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）,如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
• 常用参数：htmlString 或者 jQuery对象

// 在$(selector)中追加$node$(selector).append($node);// 在$(selector)中追加div元素，参数为htmlString$(selector).append('
    
');

• 不常用操作：
  • appendTo()
  • 作用：同append()，区别是：把$(selector)追加到node中去:$(selector).appendTo(node);
  • prepend()
  • 作用：在元素的第一个子元素前面追加内容或节点:$(selector).prepend(node);
  • after()
  • 作用：在被选元素之后，作为兄弟元素插入内容或节点:$(selector).after(node);
  • before()
  • 作用：在被选元素之前，作为兄弟元素插入内容或节点:$(selector).before(node);

//第一种：append(); 在调用者的所有子元素的最后面添加新元素var newJQ1 = $("
我是append添加的li
")$("ul").append(newJQ1);//第一种（下）：appendTo(); 在调用者的所有子元素的最后面添加新元素//被添加者和调用者与append位置想法var newJQ11 = $("
我是appendTo添加的li
")newJQ11.appendTo($("ul"));//第二种：prepend();在调用者的所有子元素的最前面添加新元素var newJQ2 = $("
我是prepend添加的li
")$("ul").prepend(newJQ2);//第二种（下）：appendTo(); 在调用者的所有子元素的最前面添加新元素//被添加者和调用者与prepend位置想法var newJQ22 = $("
我是prependTo添加的li
")newJQ22.prependTo($("ul"));//操作兄弟元素//第三种：after();把某个元素以兄弟元素的形式添加到调用者之后var newJQ3 = $("
我是after添加的li
");$("#box").after(newJQ3);//第三种：before();把某个元素以兄弟元素的形式添加到调用者之前var newJQ4 = $("
我是before添加的li
");$("#box").before(newJQ4);

html创建元素（补充）

• 作用：设置或返回所选元素的html内容（包括 HTML 标记）
• 设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

// 动态创建元素$(selector).html(‘创建元素’);// 获取html内容$(selector).html();

清空和删除元素

• 清空指定元素的所有子元素
• 没有参数

$(selector).empty();$(selector).html("");//把自己（包括所有内部元素）从文档中删除掉$(selector).remove();

• 建议使用html("<span></span>")方法来创建元素或者html("")清空元素。

复制元素

• 作用：复制匹配的元素
• 复制$(selector)所匹配到的元素
• 返回值为复制的新元素 $(selector).clone();

//获取按钮，赋值id为box的li，添加到ul的最后$("button").click(function () {    //和参数无关,只能深层复制    var jqLI = $("#box").clone();    $("ul").append(jqLI);});

如果本文有什么错误，欢迎留言指正，谢谢您！