0725-jQuery - 添加元素, 删除元素

添加新的 HTML 内容

• append() - 在被选元素的结尾插入内容

<script>

$(document).ready(function(){

$("#btn1").click(function(){

$("p").prepend("<b>Prepended text</b>. ");

});

$("#btn2").click(function(){

$("ol").prepend("<li>Prepended item</li>");

});

});

</script>

• prepend() - 在被选元素的开头插入内容
• <script>

function appendText()

{

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

var txt3=document.createElement("p");

txt3.innerHTML="Text."; // 通过 DOM 来创建文本

$("body").append(txt1,txt2,txt3); // 追加新元素

}

</script>

• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

删除元素/内容:

• remove() - 删除被选元素（及其子元素）
• <script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").remove();

});

});

</script>

• empty() - 从被选元素中删除子元素
• <script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").remove();

});

});

</script>