序号 |
方法 |
描述 |
示例 |
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> |
JQuery操作文档之插入节点
JQuery中提供了八个方法用来在文档的不同位置插入节点,具体如下: