JQuery添加删除元素

末蓝、 2021-09-14 02:44 498阅读 0赞

JQuery提供了添加元素的四种方法：

append() - 在被选元素内部的结尾插入指定内容

prepend() - 在被选元素内部的开头插入指定内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

实例：
     <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
     <script>
          $(function () {
              $('#addText').click(function () {
                  $('div').append('添加的文本内容 ')  //将append改为prepend,就是在所选元素的内部开头插入内容
              });
              $('#addItem').click(function () {
                  $('ol').append('<li>新的列表项</li>')  //将append改为prepend,就是在所选元素的内部开头插入项
              })
          })
     </script>
    </head>
    <body>
    <div>文本内容：</div>
    <ol>
       <li>One</li>
       <li>Two</li>
       <li>Three</li>
    </ol>
    <button id="addText">添加文本内容</button>
    <button id="addItem">添加列表项</button>
    </body>

<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
       <script>
          $(function () {
              $('#addText').click(function () {
                  $('div').after('<p>新的段落</p>')   //将after改为before，就可实现在被选元素之后插入新内容
              });
              $('#addItem').click(function () {
                  $('ol').after('<ul><li>新的无序列表</li></ul>')   //将after改为before，就可实现在被选元素之后插入新列表
              })
          })
    </script>
    </head>
    <body>
    <div>this is a text</div>
    <ol>
       <li>one</li>
       <li>two</li>
       <li>three</li>
    </ol>
    <button id="addText">点击添加内容</button>
    <button id="addItem">点击添加无序列表</button>
    </body>

JQuery提供了两种删除元素的方法：

remove() —删除所选元素及其子元素

empty() —删除所选元素的子元素

实例：

<style>
          div{
             background: #ff7112;
             width:200px;
             padding:100px;
             text-align: center;
             height:200px;
          }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    <script>
          $(function () {
              $('#remove').click(function () {
                  $('div').remove();     //删除所选元素及其内部子元素，就是说将整个div删除
              });
              $('#empty').click(function () {
                  $('div').empty();     //删除div里面的子元素，div不删除
              })
          })
    </script>
    </head>
    <body>
    <div>
       <p>第一个段落</p>
       <p>第二个段落</p>
       <p>第三个段落</p>
       <p>第四个段落</p>
    </div>
    <button id="remove">点击删除元素及其子元素</button>
    <button id="empty">点击删除子元素</button>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，498人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。 -------------------- 删除元素/内容如需删除元素和内容，一般可使用以下两个 jQu

蔚落/ 2024年03月16日 10:19/ 0 赞/ 23 阅读

相关 jQuery 学习-DOM篇（七）：jQuery 添加和删除父元素

> 推荐阅读 > > Helm3（K8S 资源对象管理工具）视频教程：[https://edu.csdn.net/course/detail/32506][https_

约定不等于承诺〃/ 2022年10月30日 11:24/ 0 赞/ 226 阅读

相关 jQuery HTML之捕获、设置、元素添加、元素删除

一、jQuery:捕获HTML 1.1 jQuery - 获取内容和属性获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM

墨蓝/ 2022年06月14日 10:09/ 0 赞/ 227 阅读

相关 jQuery之添加元素

任务描述本关任务：用jQuery添加元素。效果如下： ![206605][] 相关知识为了完成本关任务，你需要掌握：1.`append(),prepend()

野性酷女/ 2022年04月05日 04:38/ 0 赞/ 240 阅读

相关 jQuery之删除元素

任务描述本关任务：用jQuery删除元素。效果如下： ![206616][] 相关知识为了完成本关任务，你需要掌握：1.`remove()`，2.`empty

谁借莪１个温暖的怀抱￠/ 2022年04月05日 04:28/ 0 赞/ 241 阅读

相关 jquery 数组添加元素

var arrList = \[‘a’,‘b’,‘c’,‘d’\]; arrList.splice(jQuery.inArray(‘b’,arrList),1); aler

水深无声/ 2022年03月17日 02:44/ 0 赞/ 344 阅读

相关 jQuery添加元素

[jquery如何在元素后面添加一个元素][jquery] [jQuery][]添加插入元素技巧： jquery添加分为在指定元素的里面添加和外面添加两种：里面添加使用

青旅半醒/ 2022年01月28日 14:55/ 0 赞/ 281 阅读

相关 jQuery - 删除元素

删除元素/内容如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元

- 日理万妓/ 2021年09月15日 07:46/ 0 赞/ 418 阅读

相关 jQuery - 添加元素

添加新的 HTML 内容 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元

男娘i/ 2021年09月15日 07:46/ 0 赞/ 400 阅读

相关 JQuery添加删除元素

JQuery提供了添加元素的四种方法： append() - 在被选元素内部的结尾插入指定内容 prepend() - 在被选元素内部的开头插入指定内容 after()

末蓝、/ 2021年09月14日 02:44/ 0 赞/ 499 阅读