我们已经学习过如何来选取DOM元素，怎么创建数组，怎么创建函数，怎么把事件添加到元素，今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2，你可以添加新元素到一个HTML页面中，也可以删除元素，以及改变任何样式或者元素参数，这些都非常容易。
基本方法.get();
这个工具可以让你获取元素的属性（property）。元素的属性是组成一个HTML元素的各种不同部分，例如src、value、name等等。使用.get();方法非常简单：
参考代码： $().get();参考代码： div id= span id=Element/span /div你可以使用.get();方法获得更多属性，而不只是html标记名：
id name value href src class（如果有多个CSS类名，则将返回全部CSS类名） text （一个元素的文本内容） 等等.set();
.set();方法和.get();方法一样，不过不是获得一个值，而是设置一个值。当和事件联合使用时比较有用，通过这个方法你可以在页面加载之后改变一些属性值。
参考代码： $().set(, );参考代码： div id= a id= href=Search Engine/a/div.erase();
通过.erase();方法，你可以清除一个元素的属性值。它和前面两个方法类似。选取元素，然后选择你要清除的属性。
参考代码： $().erase();参考代码： div id= a href=Search Engine/a/div移动元素.inject();
要移动页面上一个已经存在的元素，你可以使用.inject();方法。和我们看到的其它方法类似，它用起来也非常简单，可以在你的用户界面上给你更多操控权。要使用.inject();方法，首先要设置一些包含元素变量：
参考代码： elementA = $(); elementB = $(); elementC = $();上面的代码把下面这个HTML分别赋值给了不同的变量，这样用MooTools来操作时会比较简单。
参考代码： div id= div id=A/div div id=B/div div id=C/div/div现在，要改变这些元素的顺序，我们可以通过四种方式来使用.inject();方法。我们可以把元素注入到：
底部（bottom，默认） 顶部（top） 在某个元素的前面（before） 在某个元素的后面（after）bottom和top将把这个元素注入到一个选中元素的内部，在元素内最底部或者最顶部。相对地，before和after将把一个元素注入到另外一个元素的顶部或者底部，但是不是注入到元素内部。
因此，让我们把元素顺序改变为A-C-B。由于我们不需要把一个元素注入到另外一个元素的内部，我们可以使用before或者after。
参考代码： elementC.inject(elementB, ); elementB.inject(elementC, );创建一个新元素new Element
你可以使用new Element构造器来创建一个行的HTML元素。这和写一个正常的HTML元素非常类似，只不过你需要调整一下语法，以便能够在MooTools下正常运行：
参考代码： newElementVar = Element(, { : , : , : { : , : , : , : }});现在你就有一个元素了，你可以通过我们刚才学的inject();方法把这个元素放在页面上的某个位置。我们从下面这个简单的HTML开始：
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）参考代码： div id= div id=Some div content/div/div现在，我们把ID为content_id的元素转换为一个变量：
参考代码： bodyWrapVar = $();和我们刚才学的一样，我们可以把我们创建的这个元素注入到当前的HTML中：
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）参考代码： newElementVar.inject(bodyWrapVar , );这个代码最终可能是这样的：
参考代码： div id= div id=I am a div/div div id=Some div content/div/div示例为了这个例子，我们来创建一个表单，可以让你添加一个行元素到你的HTML页面。首先，建立一些文本框和按钮。
参考代码： div id= ID: input id= name= / text: input id= name= / button id=创建一个新的div/button/div现在，我们来用MooTools写JavaScript来实现让这个HTML表单可以插入一个新的元素到你的页面中。首先，我们先给这个按钮添加一个事件，并写一个函数来包含我们的代码：
参考代码： newDiv = () { }; window.addEvent(, () { $().addEvent(, newDiv);});下一件事我们要做的就是指定我们要处理的变量。要使用输入表单中的数据，我们需要使用.get();方法：
参考代码： idValue = $().get(); textValue = $().get();现在，上面代码中的变量idValue和textValue就包含了它们指定的输入表单的值。由于我们需要在用户点击创建一个新的div按钮时获得输入框的值，我们需要把上面的代码放在newDiv();这个函数中。如果我们需要在这个函数外面获得这个值，我们需要在页面加载时获得，而不是点击时。
参考代码： newDiv = () { idValue = $().get(); textValue = $().get();}; window.addEvent(, () { $().addEvent(, newDiv);});接下里，我们需要获得我们新元素要插入到的元素：
参考代码： newDiv = () { idValue = $().get(); textValue = $().get(); bodyWrapVar = $();}; window.addEvent(, () { $().addEvent(, newDiv);});我们已经有了我们的输入表单的值了，现在我们可以创建一个新元素了：
参考代码： newDiv = () { idValue = $().get(); textValue = $().get(); bodyWrapVar = $(); newElementVar = Element(, { : idValue, : textValue });}; window.addEvent(, () { $().addEvent(, newDiv);});剩下我们要做的就是把这个新元素插入到我们的页面中了：
参考代码： newDiv = () { bodyWrapVar = $(); idValue = $().get(); textValue = $().get(); newElementVar = Element(, { : idValue, : textValue }); newElementVar.inject(bodyWrapVar, );}; removeDiv = () { $().erase();} window.addEvent(, () { $().addEvent(, newDiv); $().addEvent(, removeDiv);});代码效果演示
ID:text:
你可以试试在id文本框中输入：ilovemilk
更多学习...
一定要花一些时间看一些MooTools文档中的Elements这一节：
这一节包含了我们这里讲到的大多数内容，还有很多其它内容 可以给你在元素样式属性上更多的控制权（有些东西我们将在以后的教程中深入讲解） 包含了处理位置、坐标、尺寸大小等东西的工具
