1、HTML元素捕獲 （内容、屬性）
text();
html();
var();
2、HTML元素設定（對内容進行操作）
attr();
3、HTML 元素添加
append();
prepend();
after();
before();
定義函數 給body添加元素
4 元素删除
remove(); 全部删除
empty();删除其中子元素
全部代碼如下，
PS：因為是測試代碼，是以有注釋
HTML代碼部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML之捕獲、設定、元素添加、元素删除</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="HTMLyuansu.js"></script>
</head>
<body>
<p id="pid">this is a p yuansu<a>這是一個a标簽</a></p>
<button id="bid">click</button>
<p><input id="it" type="text" value="請輸入您的名字"></p>
<p><a id="aid" href="http://www.hao123.com">成都大學</a></p>
<p id="pid2">最初内容</p>
<button id="bid2">click2</button>
<p id="pid3">最初内容</p>
<button id="bid3">click3</button>
<input type="text" id="it2" value="請輸入您的年齡">
<button id="bid4">click4</button>
<a id="aid2" href="http://www.baidu.com">開始是百度，點選後是網址之家</a>
<button id="bid5">click5</button>
<br/>
<p id="pid4">Hellow world</p>
<button id="bid6">click6</button>
<p id="pid5">HTML元素添加</p>
<button id="bid7">click7</button>
<button onclick="appendText()">click8</button>
<div id="div1" style="width:100px;height:100px;border:1px solid black ;background-color:red">
<p>子元素1</p>
<p>子元素2</p>
<p>子元素3</p>
</div>
<button id="bit8">click9</button>
</body>
</html>
Javascript 代碼部分（JQuery）
/**
* Created by qing on 2015/8/20.
*/
//兩種方法差別：html() 可以擷取内部子标簽<p><a></a></P> 不僅可以顯示a标簽裡的内容同時把<a>也顯示出來
//而text()隻能擷取具體内容
$(document).ready(function () {
//HTML元素捕獲 内容
//$("#bid").click(function(){
// alert("P元素内容為："+$("#pid").text()); //.text() 擷取元素内容方法一
//})
$("#bid").click(function(){
alert("P元素内容為："+$("#pid").html()); //.html() 擷取元素内容方法二
});
$("#bid").click(function(){
alert("P元素内容為："+$("#it").val()); //.html() 擷取元素内容方法不同
});
//擷取元素屬性
$("#bid").click(function(){
alert("P元素内容為："+$("#aid").attr("href")); // attr("屬性名")
});
//HTML元素設定
$("#bid2").click(function(){
$("#pid2").text("更改後的内容"); // text更改元素内容
});
$("#bid3").click(function(){
$("#pid3").html("<a href='http://www.hao123.com'>網址之家</a>"); // html可以更改元素标簽
});
$("#bid4").click(function(){
$("#it2").val("18歲啦"); // val更改元素内容
});
$("#bid5").click(function(){
$("#aid2").attr({
"href":"http://www.hao123.com",
"title":"hellow" //增加屬性
})
});
//回調函數 每點選一次就會設定一次 而不是像之前的執行一次 其他方法html val attr 也可用
$("#bid6").click(function(){
$("#pid4").text(function(i,ot){
return "old:"+ot+"\t"+"new:"+(i); //ot 表示原有的内容 i表示新值 預設為0， 可是怎麼改變新值呢？
});
});
//HTML 添加元素
$("#bid7").click(function(){
//添加内容
//$("#pid5").append("這是添加的内容部分,") //在後面插入
//$("#pid5").prepend("這是添加的内容部分,") //在前面插入
//$("#pid5").after("這是添加的内容部分,") //在後面添加 換行
$("#pid5").before("這是添加的内容部分,") //在前面添加 換行
});
$("#bit8").click(function(){
//$("#div1").remove(); //全部删除
$("#div1").empty(); //删除裡面的子元素
});
});
//追加新的元素
function appendText(){
var text1="<p>HTML添加方法</p>"
var text2=$("<p></p>").text("JQ添加方法");
var text3=document.createElement("p");
text3.innerHTML="JS添加方法";
$("body").append(text1,text2,text3);
alert("測試");
}
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)