一、jQuery - 添加元素
1.append() - 在被選元素內部的結尾插入指定內容
2.prepend() - 在被選元素內部的開頭插入指定內容
3.after() - 在被選元素之后插入內容
4.before() - 在被選元素之前插入內容
添加單個元素
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p>111</p> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("p").append("222"); $("p").prepend("333"); $("p").after("444"); $("p").before("555"); }); </script>
添加若干元素----重點
<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>
二、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>
eq()方法：
1.eq() 方法返回帶有被選元素的指定索引號的元素。
2.索引號從 0 開頭，所以第一個元素的索引號是 0
<p>11111111</p> <p>11111111</p> <p>11111111</p> <p>11111111</p> </body> </html> <script> $(document).ready(function(e) { $("p").eq(1).css("background","red"); //取第二個p標簽 }); </script>
