[TOC]
## 1.添加内容
### 1-1append 从后添加 //prepend 从前添加
```
<p>你好</p>
<button type="button" id="btn1">后添加</button>
<button type="button" id="btn2">前添加</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("---我是从后添加的内容")
//$("p").after("---我是从后添加的内容")
})
$("#btn2").click(function(){
$("p").prepend("我是从前添加的内容---")
//$("p").before("我是从前添加的内容---")
})
})
</script>
```
### 1-2 after和before添加内容
## 2.添加元素 三种方法
> var text1 = "标签内容"
> var text2 = $("标签").text("内容");
var text3 = document.createElement("p"); text3.innerHTML = "内容";
```
<p>你好</p>
<button id="btn">添加元素</button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
var text1 = "<p>直接标签内容一起添加</p>";
var text2 = $("<p></p>").text("标签内容分开添加");
var text3 = document.createElement("p");
text3.innerHTML = "创建标签,再innerHTML添加内容";
$("body").append(text1, text2, text3);
})
})
</script>
```
>
