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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/miao_9/article/details/73368765

一、jQuery:捕获HTML

1.1 jQuery - 获取内容和属性
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
  1.2 获取属性 - attr()
• jQuery attr() 方法用于获取属性值。

二、jQuery设置

设置内容 - text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

   $("#btn1").click(function () {
       alert("text "+$("#it").val());//text获取标签中的内容
    });

    $("#btn2").click(function () {
        alert("text："+$("#aid").attr("href"));//text获取标签中的内容
    });

三、jQuery添加内容

添加内容的方法有：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

addContent.html

<p id="p1">hello</p>
<p id="p2">hello</p>
<button id="btn1">按钮01</button>
<button id="btn2">按钮02</button>
<button onclick="appendText()">按钮03</button>

addContent.js

/*append
* prepend
* before
* after
* */

$(document).ready(function () {
   $("#btn1").click(function () {
  //     $("#p1").append("插入内容");
       $("#p1").prepend("插入内容,");
   }) ;

   //添加内容
   $("#btn2").click(function () {
//      $("#p2").before("在前面插入，会换行");
        $("#p2").after("在后面插入，会换行");
   });
});

//添加元素
function appendText() {
    /*
    * html、jQuery、DOM*/
    var text1 = "<p>1</p>";
    var text2 = $("<p></p>").text("2");
    var text3 = document.createElement("p");
    text3.innerHTML="3";
    $("body").append(text1,text2,text3);
}

四、jQuery删除元素

删除元素的方法有：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

delete.html

<div id="div" style="height: 200px;width: 200px;border:1px solid black;background-color: aqua">
    hi
    <p>delete</p>
    <p>123</p>
</div>
<button id="btn">删除</button>

delete.js

/*
* remove
* empty
* */
$(document).ready(function () {
   $("#btn").click(function () {
    //  $("#div").remove();//全部删除
      $("#div").empty();//删除子元素
   }) ;
});