JQuery操作文档之插入节点

JQuery中提供了八个方法用来在文档的不同位置插入节点，具体如下：

序号	方法	描述	示例
1	append()	向每个匹配元素的内部追加内容 ($(A).append(B):在A的后面追加B，也就是将A作为B的最后一个子节点)	HTML：<p>Hello</p> JQuery代码：$(“p”).append(“<b>Word!<b/>”); 结果：<p>Hello<b>Word!</b></p>
2	appendTo()	将所有匹配的元素追加到指定的元素中。($(A).appendTo(B):将A追加到B中，此时A是B的最后一个子节点)与append()刚好相反	HTML：<p>Hello</p> JQuery代码：$(“<b>Word!<b/>”).appendTo(“p”); 结果：<p>Hello<b>Word!</b></p>
3	prepend	向每个匹配元素的内部前置内容 ($(A). prepend(B):在A的内部前置B，也就是将A作为B的第一个子节点)	HTML：<p>Hello</p> JQuery代码：$(“p”). prepend (“<b>Word!<b/>”); 结果：<p><b>Word!</b>Hello</p>
4	prependTo()	将所有匹配的元素前置到指定的元素中。($(A). prependTo (B):将A前置到B中，此时A是B的第一个子节点)与prepend ()刚好相反	HTML：<p>Hello</p> JQuery代码： $(“<b>Word!<b/>”). prependTo (“p”); 结果：<p><b>Word!</b>Hello</p>
5	after()	在每个匹配元素之后插入内容（$(A).after(B):将A作为兄弟节点追加到B的后面）	HTML：<p>Hello</p> JQuery代码：$(“p”). after (“<b>Word!<b/>”); 结果：<p>Hello</p><b>Word!</b>
6	insertAfter()	将所有匹配元素插入到指定元素的后面（$(A). insertAfter(B):在B元素后面追加一个兄弟节点A）	HTML：<p>Hello</p> JQuery代码： $(“<b>Word!<b/>”). insertAfter(“p”); 结果：<p>Hello</p><b>Word!</b>
7	before	在每个匹配元素之前插入内容（$(A). before (B):将A作为兄弟节点添加到B的前面）	HTML：<p>Hello</p> JQuery代码：$(“p”). before (“<b>Word!<b/>”); 结果：<b>Word!</b><p>Hello</p>
8	insertBefore	将所有匹配元素插入到指定元素的前面（$(A). insertAfter(B):在B元素前面追加一个兄弟节点A）	HTML：<p>Hello</p> JQuery代码： $(“<b>Word!<b/>”). insertBefore (“p”); 结果：<b>Word!</b><p>Hello</p>