jQuery元素操作

创建元素

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

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

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

  // 动态创建元素
  
  $(selector).html(‘<span>传智播客</span>’);
  
  // 获取html内容
  
  $(selector).html();
  

添加元素

• append()在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）

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

  不常用的添加元素操作

  • appendTo()
    作用：同append()，区别是：把$(selector)追加到node中去

  $(selector).appendTo(node);
  

  • prepend()
    作用：在元素的第一个子元素前面追加内容或节点

  $(selector).prepend(node);
  

  • after()
    作用：在被选元素之后，作为兄弟元素插入内容或节点

  $(selector).after(node);
  

  +before()
  作用：在被选元素之前，作为兄弟元素插入内容或节点

  $(selector).before(node);
  

清空元素

清空指定元素的所有子元素

$(selector).empty();

$(selector).html(“”);

// “自杀” 把自己（包括所有内部元素）从文档中删除掉

$(selector).remove();

复制元素

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素

// 返回值为复制的新元素

$(selector).clone();