JQuery添加删除元素

末蓝、 2021-09-14 02:44 621阅读 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 条评论，621人围观）

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

相关阅读

相关 jQuery - 删除元素

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

Love The Way You Lie/ 2024年03月16日 10:46/ 0 赞/ 92 阅读

相关 jQuery - 删除元素

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

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

相关 jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。 -------------------- 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery

不念不忘少年蓝@/ 2024年03月16日 10:19/ 0 赞/ 82 阅读

相关 jquery添加css_jQuery添加CSS，添加html元素

jquery添加css jQuery add method can be used to add elements, selectors or html to the mat

╰+哭是因爲堅強的太久メ/ 2023年02月28日 08:45/ 0 赞/ 30 阅读

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

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

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

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

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

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

相关 jQuery添加元素

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

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

相关 jQuery - 删除元素

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

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

相关 jQuery - 添加元素

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

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

相关 JQuery添加删除元素

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

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