添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var i = 0;
$("#btn1").click(function(){
i ++ ;
$("p").append("<b>" + i + "</b>" + " ");
}); $("#btn2").click(function(){
$("ol").append("<li>添加列表</li>");
});
});
</script>
</head> <body>
<p>Number：</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本数字</button>
<button id="btn2">添加列表项</button>
<hr>
<button onclick="appendText()">追加文本</button>
</body> <script>
function appendText(){
var txt1="<b>文本------</b>"; // 使用 HTML 标签创建文本
var txt2=$("<u></u>").text("文本-----"); // 使用 jQuery 创建文本
var txt3=document.createElement("i");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</html>