.before() 可以在选择的元素的上面，添加指定的内容 … after() 可以在选择的元素的下面，去添加指定的内容 … 也就是用 .before() 和 .after() 添加的内容跟选择的元素之间是兄弟的关系 …

跟这两个方法类似的还有 .insertBefore() .. 和 .insetAfter() … 不同的是，这两个方法是先设置要插入到某个地方的内容 … 然后在方法里指定内容要插入到的那个位置 …

测试

比如我们可以先选中页面上所有的 h6 元素 … 然后再用 before() 和 after() 在它的上面或者下面去添加点内容 …

$( '.album h6' ).after( '<h5>Coldplay</h5>' )

选中 h6 元素 .. 调用 .after() 方法，在它的后面添加点内容 … 添加的内容可以作为 .after() 方法里的参数 …

现在， 每个 h6 元素的下面，都有一个 Coldplay 的标题 … 我们也可以把这个标题添加到 h6 标题的上面 …

把 after 改成 before …

$( '.album h6' ).before( '<h5>Coldplay</h5>' )

添加的内容可以是具体的字符串 … 或者也可以是选择器 … 比如我们可以选中页面上的图像 .. 然后把 h6 元素放在图像的下面或者上面 …

下面再去试试 .insertBefore() .. 还有 .insetAfter() 这两个方法 …

先在 jQuery 函数里面，指定一个要插入到某个位置上的内容 ... 然后调用 insertBefore 方法 ... 在方法里，指定要插入的具体的位置 ...

$( '<h5>Coldplay</h5>' ).insertBefore( '.album h6' );

最后再试一下 .insertAfter() …

$( '<h5>Coldplay</h5>' ).insertAfter( '.album h6' );

新添加的标题会插入到 h6 元素的下面 …