我們已經學習過如何來選取dom元素，怎么創建數組，怎么創建函數，怎么把事件添加到元素，今天我們來深入地學習一下如果操縱html元素。通過mootools 1.2，你可以添加新元素到一個html頁面中，也可以刪除元素，以及改變任何樣式或者元素參數，這些都非常容易。

基本方法

.get();

這個工具可以讓你獲取元素的屬性（property）。元素的屬性是組成一個html元素的各種不同部分，例如src、value、name等等。使用.get();方法非常簡單：

你可以使用.get();方法獲得更多屬性，而不只是html標記名：

• id
• name
• value
• href
• src
• class（如果有多個css類名，則將返回全部css類名）
• text （一個元素的文本內容）
• 等等…

.set();

.set();方法和.get();方法一樣，不過不是獲得一個值，而是設置一個值。當和事件聯合使用時比較有用，通過這個方法你可以在頁面加載之后改變一些屬性值。

.erase();

通過.erase();方法，你可以清除一個元素的屬性值。它和前面兩個方法類似。選取元素，然后選擇你要清除的屬性。

移動元素

.inject();

要移動頁面上一個已經存在的元素，你可以使用.inject();方法。和我們看到的其它方法類似，它用起來也非常簡單，可以在你的用戶界面上給你更多操控權。要使用.inject();方法，首先要設置一些包含元素變量：

上面的代碼把下面這個html分別賦值給了不同的變量，這樣用mootools來操作時會比較簡單。

現在，要改變這些元素的順序，我們可以通過四種方式來使用.inject();方法。我們可以把元素注入到：

• 底部（bottom，默認）
• 頂部（top）
• 在某個元素的前面（before）
• 在某個元素的后面（after）

bottom和top將把這個元素注入到一個選中元素的內部，在元素內最底部或者最頂部。相對地，before和after將把一個元素注入到另外一個元素的頂部或者底部，但是不是注入到元素內部。

因此，讓我們把元素順序改變為a-c-b。由于我們不需要把一個元素注入到另外一個元素的內部，我們可以使用before或者after。

創建一個新元素

new element

你可以使用“new element”構造器來創建一個行的html元素。這和寫一個正常的html元素非常類似，只不過你需要調整一下語法，以便能夠在mootools下正常運行：

現在你就有一個元素了，你可以通過我們剛才學的inject();方法把這個元素放在頁面上的某個位置。我們從下面這個簡單的html開始：

現在，我們把id為content_id的元素轉換為一個變量：

和我們剛才學的一樣，我們可以把我們創建的這個元素注入到當前的html中：

這個代碼最終可能是這樣的：

示例

為了這個例子，我們來創建一個表單，可以讓你添加一個行元素到你的html頁面。首先，建立一些文本框和按鈕。

現在，我們來用mootools寫javascript來實現讓這個html表單可以插入一個新的元素到你的頁面中。首先，我們先給這個按鈕添加一個事件，并寫一個函數來包含我們的代碼：

下一件事我們要做的就是指定我們要處理的變量。要使用輸入表單中的數據，我們需要使用.get();方法：

現在，上面代碼中的變量idvalue和textvalue就包含了它們指定的輸入表單的值。由于我們需要在用戶點擊“創建一個新的div”按鈕時獲得輸入框的值，我們需要把上面的代碼放在newdiv();這個函數中。如果我們需要在這個函數外面獲得這個值，我們需要在頁面加載時獲得，而不是點擊時。

接下里，我們需要獲得我們新元素要插入到的元素：

我們已經有了我們的輸入表單的值了，現在我們可以創建一個新元素了：

剩下我們要做的就是把這個新元素插入到我們的頁面中了：

代碼效果演示

更多學習...

一定要花一些時間看一些mootools文檔中的elements這一節：

• element這一節包含了我們這里講到的大多數內容，還有很多其它內容
• element.style可以給你在元素樣式屬性上更多的控制權（有些東西我們將在以后的教程中深入講解）
• element.dimentions包含了處理位置、坐標、尺寸大小等東西的工具