在这里,介绍4个常用的方法:
- append():在被选元素的结尾插入内容(仍然是元素内部);
- prepend():在被选元素的开头插入内容(仍然是元素内部);
- after():在被选元素之后插入内容;
- before():在被选元素之前插入内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鸟教程</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
</style>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
var txt1 = "<p>文本</p>";
var txt2 = $("<p></p>").text("文本");
var txt3 = document.createElement("p");
txt3.innerHTML = "文本";
$("body").append(txt1, txt2, txt3);
});
$("#btn2").click(function(){
var txt4 = "<b>文本</b>";
var txt5 = "<strong>文本</strong>";
$("p").after(txt4,txt5);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<br>
<button id="btn1">追加文本</button>
<button id="btn2">追加文本</button>
</body>
</html>