本文介绍了 jQuery 中的 append(), prepend(), before 和 after 四种 DOM 操作方法，包括它们的定义、语法及具体应用实例。
刚好使用到了jq的append方法来对Dom元素进行操作，所以顺便将其相同类型的方法进行了总结，希望对开发者有所帮助，如有不正确的地方，欢迎指正！
此文档分为三部分：定义、语法、举例；需要查看详细用法的童鞋，可以下滑举例部分进行查看
一、定义
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
before:在元素的前边，作为兄弟元素添加；
after:在元素的后边，作为兄弟元素添加；
二、语法
这四种方法的语法都有两种且相同，在此只举例其中一种方法的语法，其他三种方法的语法以此类推
1、$(selector).before(content)
content为必需。规定要插入的内容（可包含 HTML 标签）。
2、$(selector).before(function(index))
function(index) 为必需。规定返回待插入内容的函数。
index - 可选。接收选择器的 index 位置。
常用方法为第一种
三、举例
1、append()
如：
<body>
<div><p>我是本来就存在的</p>
</div>
</body>
通过jquery代码$("div").append("<p>我是通过append添加的</p>")，得到的结果是：
<body>
<div>
<p>我是本来就存在的</p>
<p>我是通过append添加的</p>
</div>
</body>
2、prepend()
如：
<body>
<div>
<p>我是本来就存在的</p>
</div>
</body>
通过jquery代码$("div").prepend("<p>我是通过prepend添加的</p>")，得到的结果是：
<body>
<div>
<p>我是通过prepend添加的</p>
<p>我是本来就存在的</p>
</div>
</body>
3、before
如：
<body>
<div class="base">我要给我前面加一个兄弟节点</div>
</body>
通过jquery代码 $(".base").before("<div>我是在前边添加的兄弟节点</div>")，得到的结果是：
<body>
<div>我是在前边添加的兄弟节点</div>
<div class="base">我要给我前面加一个兄弟节点</div>
</body>
4、after
如：
<body>
<div class="base">我要给我后面加一个兄弟节点</div>
</body>
通过jquery代码 $(".base").after("<div>我是在后边添加的兄弟节点</div>")，得到的结果是：
<body>
<div class="base">我要给我后面加一个兄弟节点</div>
<div>我是在后边添加的兄弟节点</div>
</body>
如有问题欢迎留言提问！
注：转载请注明出处！
扫一扫
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
