jQuery 添加和删除HTML元素

原创
08/21 22:16
阅读数 0

本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下几种:

方法 描述
append() 在所选元素的末尾插入内容
prepend() 在选定元素的开头插入内容
after() 在选定元素后插入内容
before() 在选定元素之前插入内容

而用于删除元素的方法有:

方法 描述
remove() 删除被选元素容,包括子元素
empty() 删除被选元素的所有子节点和内容

append()方法

append() 方法可以在指定元素的末尾插入内容。

语法如下:

$(selector).append(content,function(index,html))
  • content:规定要插入的内容,可以包含 HTML 元素、jQuery 对象、DOM 元素。
  • function(index,html):规定返回待插入内容的函数,index 为集合中元素的索引位置,html 为被选元素的当前 HTML
示例:

我们来看下面这个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").append("侠课岛");
    });
  });
</script>
</head>
<body>
  <p>你好,我的名字叫做:</p>
  <button>点击追加文本</button>
</body>
</html>

点击按钮,在指定的 <p> 标签末尾添加文本内容 "侠课岛",我们可以在浏览器中看一下演示结果:

除了文本内容,我们还可以在元素中添加 HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("ul").append("<li>strawberry</li>");
    });
  });
</script>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>pear</li>
    <li>peach</li>
    <li>watermelon</li>
  </ul>
  <button>点击追加文本</button>
</body>
</html>

在浏览器中的演示结果:

prepend()方法

prepend() 方法其实和 append() 方法类似,语法也差不多。但是 prepend() 方法主要用于在被选元素的开头插入指定内容。

语法如下:

$(selector).prepend(content,function(index,html))
示例:

我们将上述示例中的 append() 方法改成 prepend() 方法:

$(function(){
    $("button").click(function(){
      $("ul").prepend("<li>strawberry</li>");
    });
});

然后看一下在浏览器中的演示结果:

after()方法

after() 方法用于在被选元素后插入指定的内容。看起来 after() 方法和 append() 方法的作用好像差不多,但是其实两个方法还是有区别的。 append() 方法是在被选元素的结尾插入内容,插入的内容仍然在元素内部。而 after() 插入的内容会重新起一行,与被选择的元素并没有什么逻辑上的联系。

示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").after("<p>侠课岛</p>");
    });
  });
</script>
</head>
<body>
  <p>你好,我的名字叫做:</p>
  <button>点击追加文本</button>
</body>
</html>

在浏览器中的演示效果:

before()方法

before() 方法用于在被选元素之前插入指定的内容。它和 prepend() 方法的区别在于一个在被选元素内插入内容,一个在被选元素外。

注意 before() 方法和 after() 方法都是在被选元素外插入内容。append()prepend() 方法都是在被选元素内插入内容。

示例:

例如将上述示例中的方法改为 before

$(function(){
    $("button").click(function(){
      $("p").before("<p>侠课岛</p>");
    });
});

在浏览器中的演示效果:

remove()方法

remove() 方法用于删除被选元素及其子元素。该方法也会删除被选元素的数据和事件。

示例:

例如下面这个例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").remove();
    });
  });
</script>
</head>
<body>
  <p>你好,欢迎来到侠课岛!</p>
  <button>点击删除</button>
</body>
</html>

在浏览器中的演示效果:

从上图中可以看到,remove() 方法将指定的 p 元素连标签带元素全部删除。

empty()方法

empty() 方法用于删除被选元素的所有子节点和内容。该方法不会移除元素本身,或它的属性。

示例:

我们讲上述示例中的 remove() 方法改为empty() 方法,看看有什么不同:

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在浏览器中的演示效果:

可以看到 empty() 方法只会删除指定元素中的内容,不会删除元素本身,当然如果元素上有属性,属性也不会被删除,大家可以自己试一下。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部