菜鸟教程
教程 jquery tutorial

添加与删除元素

jQuery 提供丰富的方法用于动态添加和删除页面元素，实现页面内容的灵活更新。

添加元素

  • append() — 在元素内部末尾添加内容
js 
  $("ul").append("<li>新项</li>");
  • prepend() — 在元素内部开头添加内容
js 
  $("ul").prepend("<li>新项</li>");
  • after() — 在元素外部后面插入内容
js 
  $("h2").after("<p>这是新段落。</p>");
  • before() — 在元素外部前面插入内容
js 
  $("h2").before("<p>这是新段落。</p>");

删除元素

  • remove() — 删除匹配的元素及其子元素
js 
  $("p").remove();
  • empty() — 清空匹配元素的内容，但保留元素本身
js 
  $("div").empty();

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 在ul末尾添加新项
    $("#addEnd").click(function () {
      $("ul").append("<li>追加项</li>");
    });
    // 在ul开头添加新项
    $("#addStart").click(function () {
      $("ul").prepend("<li>前置项</li>");
    });
    // 在h2后插入新段落
    $("#addAfter").click(function () {
      $("h2").after("<p>插入的新段落。</p>");
    });
    // 删除所有段落
    $("#remove").click(function () {
      $("p").remove();
    });
    // 清空所有div内容
    $("#empty").click(function () {
      $("div").empty();
    });
  });
</script>

<h2>标题</h2>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<p>这是段落。</p>
<div>这里有内容。</div>


<button id="addEnd">追加列表项</button>
<button id="addStart">前置列表项</button>
<button id="addAfter">在标题后插入段落</button>
<button id="remove">删除段落</button>
<button id="empty">清空DIV内容</button>

相关内容