儘管前端三雄（Angular、React、Vue）討論熱度強烈，但是前端老馬 - jQuery 的市佔率仍舊是名列前矛，在 jQuery 中常用的安插 DOM 元件的方法有這八個：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()，使用起來時常會讓我感到混亂，這篇文章就用圖解的方式做個記錄，來說明每個方法的差異。
append()
append() 是在 DOM 元件裡面的最下面加入另一個 DOM 元件，有異曲同工之妙的還有下面的 appendTo()。
appendTo()
appendTo() 是把 DOM 元件加到另一個 DOM 元件裡面的最下面，與 append() 的差別就只有在於呼叫方跟參數是對調的。
prepend()
prepend() 跟 append() 類似，只差在 prepend() 是在 DOM 元件裡面的最上面加入另一個 DOM 元件。
prependTo()
prependTo() 是把 DOM 元件加到另一個 DOM 元件裡面的最上面，跟 prepend() 的效果是一樣的，差別只有在於呼叫方跟參數是對調的。
after()
after() 是在 DOM 元件的下面安插另一個 DOM 元件，相同效果的還有 insertAfter()。
insertAfter()
insertAfter() 是把 DOM 元件安插在另一個 DOM 元件的下面，與 after() 的效果相同，差別只在於呼叫方跟參數是對調的。
before()
有 after() 自然就會有 before()，before() 是在 DOM 元件的上面安插另一個 DOM 元件。
insertBefore()
insertBefore() 是把 DOM 元件安插在另一個 DOM 元件的上面，與 before() 的效果是一樣的，差別在於呼叫方與參數是對調的。
使用 after()、insertAfter()、before()、insertBefore() 這四個安插 DOM 元件方法要注意一點，參考位置的 DOM 元件必須已經在 DOM Tree 裡面，這樣被安插的 DOM 元件才有辦法知道要安插的位置在哪裡。
以上，把這幾個 jQuery 常用到的安插 DOM 元件的方法記錄起來，以後感到混亂的時候，要查就有。
