如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素（Tag element）讓元素從原本的位置（指的是親子位置）變更到其他位置

我在設計網頁的時候，經常會需要用一個Design的DIV來試著排版，但這內容可能在一開始得隱藏，並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中，所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。

原本以為會用到的是 JQuery 的 add()，但是跟想像的有所差異

add()是用來把指定的元素加入自己所在的集合，然後一起去做什麼事情。比方說
這個例子，他是把所有的DIV加上邊框，之後包含著<P>元素來做把背景變成黃色。然而，<P>元素本身並不會變更其親子關係，也就是<P>元素如果在其他DIV中，這個關係不會變。




應該要用 JQuery 的 append(), prepend(), after(), before()來做，才是真正的把元素加到某個元素中。差異說明（請先下載範例）：




畫面被分割成上、中、下：Div_Header、Div_Content、Div_Footer三個區塊，每個區塊各自放了一些方塊，而「我會被搬走」這個方塊則是在按下上方的按鈕之後，會被移動，可從上方的藍色框線看出Div_Header的範圍，進而判斷出是否DivAdd01在Div_Header之中。

1.比方我要把DivAdd01這個ID的DIV放到Div_Header中，則該使用append(),跟prepend(),兩個函式，會把DivAdd01加到Div_Header中，並決定放置在最後或最前面的位置。

2.另外，after(), before()則是會把DivAdd01加到Div_Header的父親層，讓DivAdd01跟Div_Header處於同一層，然後差異也在於放在之前或之後。

3.按下add按鈕，則會把left連同Top_left，具有這兩個class的元素都會被設定為被景色白色。