這個方法跟prependTo()和appendTo()不一樣的地方在於，一個是仍然插入到元素內部，而insertAfter和insertBefore是插入到元素外部。
這里拿insertBefore來作為例子說一下：
使用方法：
第一種方法：插入代碼：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("<span>你好！</span>").insertAfter("p"); }); }); </script> </head> <body> <p>這是一個段落。</p> <p>這是另一個段落。</p> <button>在每個 p 元素之后插入 span 元素</button> </body> </html>
插入前：
插入后：
第二種方法：插入已有的元素
會把已有的元素取出來，插入到特定元素的指定位置。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1").insertAfter("p"); }); }); </script> </head> <body> <h1>這是一個標題</h1> <p>這是一個段落。</p> <p>這是另一個段落。</p> <button>在每個 p 元素之后插入 h1 元素</button> </body> </html>
插入前：
插入后：
會發現，已有的元素在原來的位置消失了，而被復制，插入到特定位置上了。
after() 方法和before() 方法與insertAfter和insertBefore類似，不過使用方式不一樣。
例子：
$("button").click(function(){ $("p").before("<p>Hello world!</p>"); });