一、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();//刪除子元素
   }) ;
});