清空append添加到html上的内容

偏执的太偏执、 2023-10-03 19:04 33阅读 0赞

## [JQUERY添加、删除元素、eq()方法；][JQUERY_eq] ##

### 一、jQuery - 添加元素 ###

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

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

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

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

**添加单个元素**

![79d7f64cfebd65e24f1233549793b8f3.png][]

**添加若干元素----重点**

<body>
    
    <button onclick="tianjia()">追加文本</button>
    </body>
    </html>
    <script type="text/javascript">
    function tianjia() 
    {
        var txt1="<p>文本1</p>";              // 使用 HTML 标签创建文本
        var txt2=$("<p></p>").text("文本2");  // 使用 jQuery 创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本3";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1,txt2,txt3);        // 追加新元素
    }
    
    </script>

![3f25d469074afa0f990f59624c338ee5.png][]

### 二、jQuery - 删除元素 ###

1.remove() - 删除**被选元素（及其子元素）**

2.empty() - 从被选元素中**删除子元素**

<div id="div1">
    
    111111
    <p>2222222</p>
    <p class="pp">3333333333</p>
    <p class="pp">444444444</p>
    </div>
    <br>
    <button>移除div元素</button>
    </body>
    </html>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").remove();         //删除div及其里边的p所有内容
        
         $("#div1").empty();         //删除div里面的p标签里面的内容
         
          $("p").remove(".pp");      //删除所有class为pp的p标签
      });
    });
    
    </script>

[JQUERY_eq]: https://www.cnblogs.com/xingyue1988/p/6218100.html
[79d7f64cfebd65e24f1233549793b8f3.png]: https://img-blog.csdnimg.cn/img_convert/79d7f64cfebd65e24f1233549793b8f3.png
[3f25d469074afa0f990f59624c338ee5.png]: https://img-blog.csdnimg.cn/img_convert/3f25d469074afa0f990f59624c338ee5.png