HTML页面添加元素的方法

append方法

html语句

<p id="p1">hello worldp>
<button id="btn">点击button>

未添加之前的效果图：
JS语句：

$("#p1").append("hello");

添加后，点击2次button后的效果图：

prepend方法

html语句同append，JS语句为：

$("#p1").prepend("hello");

添加后，点击2次button后的效果图：

before方法

JS语句为：

$("#p1").before("hello");

添加后，点击2次button后的效果图：

after方法
JS语句为：

$("#p1").after("hello")

添加后，点击2次button后的效果图：

总结：

相同点：append与after是在原内容之后添加元素，prepend与before方法是在原内容之前添加元素。
不同点：append与prepend方法添加的元素与原内容在同一行，before与after方法添加的元素与原内容不在同一行。