jQuery节点操作

节点操作

  • 1.动态创建元素
// $()函数的另外一个作用:动态创建元素  
var $li = $(“<li>我是一个li元素</li>”); 
  • 2.html创建元素
    作用:设置或返回所选元素的html内容(包括 HTML 标记)
    设置内容的时候,如果是html标记,会动态创建元素,此时作用跟JS里面的innerHTML属性相同
// 动态创建元素  
$("div").html(‘<span>我是内容</span>’);  
// 获取html内容  
$("div").html(); 
  • 3.添加元素
  • append()方法
    作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(页面中存在或者创建出来的元素都可以)
//在$('.red')的最后一个子元素后面添加$li
$('.red').append($li);
//参数可以为htmlString 
$('.red').append("<li></li>");
  • appendTo()方法
    作用:同append(),区别是:把$li追加到$('.red')中去
$li.appendTo($('.red'))
  • prepend()方法
    作用:在被选元素内部的第一个子元素前面追加内容或节点
//在$('.red')的第一个子元素前面添加$li
$('.red').prepend($li);
  • prependTo()方法
    作用:同prepend(),区别是:把$li追加到$('.red')中去
$li.prependTo($('.red'));
  • after()方法/insertAfter()方法
    作用:在被选元素之后,作为兄弟元素插入内容或节点
$('.red').after($li);
$li.insertAfter($('.red'))
  • before()方法/insertBefore()方法
    作用:在被选元素之前,作为兄弟元素插入内容或节点
$('.red').before($li);
$li.insertBefore($('.red'))
  • 4.删除清空节点
//把自己,包括所有内部元素,从文档中删除掉 
$('.red').remove();
//清空指定元素的所有子元素 
$('.red').empty();
$('.red').html('')
  • 注意:如果有事件,使用html("")方法清空节点并不会清除事件,而empty方法则会清除元素上的所有事件,因此推荐使用empty方法清空节点
  • 5.复制节点
  • clone()方法
    作用:浅复制, 仅仅复制这个节点, 而不复制事件
var $pTag = $('p');
$pTag.clone();      //复制$pTag这个节点到指定元素
  • clone(true)方法
    作用:深复制 复制这个节点, 会复制事件
var $pTag = $('p');
$pTag.clone(true);        //复制$pTag这个节点(包括事件)到指定元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容