jQuery HTML节点元素修改、追加的方法 html，、append

我们先拟定一个代码场景

1. <div>start</div>
2. <p>123</p>
3. <div>end</div>

html() 操作节点中的内容，一般我们可以用来快速给一个容器中赋值。

$("p").html("abc");

最终看到的结果

1. <div>start</div>
2. <p>abc</p>
3. <div>end</div>

append() 追加到节点中的末尾处

$("p").append("abc");

最终看到的结果

1. <div>start</div>
2. <p>123abc</p>
3. <div>end</div>

prepend() 追加到节点中的起始处

$("p").prepend("abc");

最终看到的结果

1. <div></div>
2. <p>abc123</p>
3. <div>end</div>

alert() 追加到节点的后面

$("p").prepend("<p>abc</p>");

最终看到的结果

1. <div>start</div>
2. <p>123</p>
3. <p>abc</p>
4. <div>end</div>

before()追加到节点的前面

$("p").prepend("<p>abc</p>");

最终看到的结果

1. <div>start</div>
2. <p>abc</p>
3. <p>123</p>
4. <div>end</div>