深圳HTML5培训-高端面授深圳HTML5培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

jQuery怎样添加元素和删除元素?

  • 发布时间:
    2023-01-11
  • 版权所有:
    云和教育
  • 分享:

添加元素

jQuery 提供了添加元素的方法,用来为目标元素添加某个元素。添加的方式有两种,分别是内部添加和外部添加,下面我们分别进行讲解。

1.内部添加

内部添加的方式可以实现在元素内部添加元素,并且可以放到内部的最后面或者最前面内部添加主要通过 append()和 prepend()方法来实现,下面我们通过代码进行演示:

var li = $("<li>我是后来创建li</li>");
$("ul").append(li);           //内部添加并且放到内部的最后面
$("ul").prepend(li);          //内部添加并且放到内部的最前面

上述代码中,通过$(“ul”)获取到页面中的ul元素并调用append(li)将li元素添加到ul中append()是把元素添加到匹配元素内部的最后面,而prepend()是把元素添加到匹配元素内部的最前面。

2. 外部添加

外部添加就是把元素放到目标元素的后面或者前面,通过after()和before()方法来实现。下面我们通过代码进行演示。

Var div = $("<div>我是后来创建的div</div>");
$(",test").after(div);                  // div放入到目标元素的后面
$(n.test").before(div);                 // div放人到目标元素的前面

上述代码中,在类名为“test”的元素后面和前面分别插入div元素。其中after()表示在目标元素的后面插人div元素,而before()表示在目标元素的前面插人div元素。

删除元素

删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节点两种情况,用到的方法如表 1所示。
1668501694160_说明.png

为了读者更好地理解jQuery 中节点删除的操作,下面我们通过代码进行演示

$("ul") .remove ();                  //删除匹配的元素
$("ul").empty();                     //删除匹配的元素里面的子节点

上述代码中,empty0方法仅能删除匹配元素的文本内容,而元素节点依然存在remove()方法则可以同时删除匹配元素本身和文本内容。因此,在开发时要根据实际的需求选择合适的方法进行元素删除操作。

利用 html()方法可以修改元素的内容,如果在参数中传入一个空字符串,也可以实现删除元素子节点的效果,如”$(“ul”).html(“)”。