我们已经学习过如何来选取DOM元素，怎么创建数组，怎么创建函数，怎么把事件添加到元素，今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2，你可以添加新元素到一个HTML页面中，也可以删除元素，以及改变任何样式或者元素参数，这些都非常容易。
基本方法
.get();
这个工具可以让你获取元素的属性（property）。元素的属性是组成一个HTML元素的各种不同部分，例如src、value、name等等。使用.get();方法非常简单：
参考代码：
复制代码 代码如下:
// 下面这行将返回id为“id_name”的元素的html标记名（div、a、span……）
$('id_name').get('tag');
参考代码：
复制代码 代码如下:
<div>
<span>Element</span> <!-- 上面的代码将返回“span” -->
</div>
你可以使用.get();方法获得更多属性，而不只是html标记名：
id
name
value
href
src
class（如果有多个CSS类名，则将返回全部CSS类名）
text （一个元素的文本内容）
等等…
.set();
.set();方法和.get();方法一样，不过不是获得一个值，而是设置一个值。当和事件联合使用时比较有用，通过这个方法你可以在页面加载之后改变一些属性值。
参考代码：
// 这将设置id为id_name的元素链接地址为“”
$('id_name').set('href', 'http://www.google.com');
参考代码：
复制代码 代码如下:
<div>
<!-- 上面的代码将改变链接地址为“” -->
<a href="https://www.yahoo.com">Search Engine</a>
</div>
.erase();
通过.erase();方法，你可以清除一个元素的属性值。它和前面两个方法类似。选取元素，然后选择你要清除的属性。
参考代码：
// 这讲移除id为id_name的元素的href属性
$('id_name').erase('href');
参考代码：
复制代码 代码如下:
<div>
<!-- 上面的代码将清除链接地址 -->
<a href="https://www.yahoo.com">Search Engine</a>
</div>
移动元素
.inject();
要移动页面上一个已经存在的元素，你可以使用.inject();方法。和我们看到的其它方法类似，它用起来也非常简单，可以在你的用户界面上给你更多操控权。要使用.inject();方法，首先要设置一些包含元素变量：
参考代码：
复制代码 代码如下:
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
上面的代码把下面这个HTML分别赋值给了不同的变量，这样用MooTools来操作时会比较简单。
参考代码：
复制代码 代码如下:
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
现在，要改变这些元素的顺序，我们可以通过四种方式来使用.inject();方法。我们可以把元素注入到：
底部（bottom，默认）
顶部（top）
在某个元素的前面（before）
在某个元素的后面（after）
bottom和top将把这个元素注入到一个选中元素的内部，在元素内最底部或者最顶部。相对地，before和after将把一个元素注入到另外一个元素的顶部或者底部，但是不是注入到元素内部。
因此，让我们把元素顺序改变为A-C-B。由于我们不需要把一个元素注入到另外一个元素的内部，我们可以使用before或者after。
参考代码：
复制代码 代码如下:
// 下面这句的意思是：把元素C放到元素B之前
elementC.inject(elementB, 'before');
// 下面这句的意思是：把元素B放到元素C之后
elementB.inject(elementC, 'after');
创建一个新元素
new Element
你可以使用“new Element”构造器来创建一个行的HTML元素。这和写一个正常的HTML元素非常类似，只不过你需要调整一下语法，以便能够在MooTools下正常运行：
参考代码：
// 首先命名一个变量并声明一个“new Element”
// 然后定义元素的类型（div、a、span...）
var newElementVar = new Element('div', {
// 在这里设置元素的所有属性
'id': 'id_name',
'text': 'I am a new div',
'styles': {
// 在这里设置元素的所有样式参数
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
现在你就有一个元素了，你可以通过我们刚才学的inject();方法把这个元素放在页面上的某个位置。我们从下面这个简单的HTML开始：
参考代码：
<div>
<div>Some div content</div>
</div>
现在，我们把ID为content_id的元素转换为一个变量：
参考代码：
var bodyWrapVar = $('body_wrap');
和我们刚才学的一样，我们可以把我们创建的这个元素注入到当前的HTML中：
参考代码：
// 这句的意思是说：“把newElementVar注入到bodyWrapVar内部，并放置到顶部”
newElementVar.inject(bodyWrapVar , 'top');
这个代码最终可能是这样的：
参考代码：
<div>
<!-- 这个元素被注入到内部顶部 -->
<div>I am a new div</div>
<div>Some div content</div>
</div>
示例
为了这个例子，我们来创建一个表单，可以让你添加一个行元素到你的HTML页面。首先，建立一些文本框和按钮。
参考代码：
复制代码 代码如下: