Mootools 1.2教程(6)——操纵HTML DOM元素（4）

示例

为了这个例子，我们来创建一个表单，可以让你添加一个行元素到你的HTML页面。首先，建立一些文本框和按钮。

参考代码：

<div id="body_wrap">
        ID:  <input id="id_input" name="id" />
        text:  <input id="text_input" name="text" />
        <button id="new_div">创建一个新的div</button>
</div>

现在，我们来用MooTools写JavaScript来实现让这个HTML表单可以插入一个新的元素到你的页面中。首先，我们先给这个按钮添加一个事件，并写一个函数来包含我们的代码：

参考代码： 

var newDiv = function() {
    // 我们将把“添加一个新元素”的代码放在这里
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

下一件事我们要做的就是指定我们要处理的变量。要使用输入表单中的数据，我们需要使用.get();方法：

参考代码： 

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

现在，上面代码中的变量idValue和textValue就包含了它们指定的输入表单的值。由于我们需要在用户点击“创建一个新的div”按钮时获得输入框的值，我们需要把上面的代码放在newDiv();这个函数中。如果我们需要在这个函数外面获得这个值，我们需要在页面加载时获得，而不是点击时。

参考代码： 

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

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

参考代码：

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

我们已经有了我们的输入表单的值了，现在我们可以创建一个新元素了：

参考代码： 

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');

    var newElementVar = new Element('div', {
        // 这将设置这个元素的id为idValue的值
        'id': idValue,
        // 这将设置这个元素的文本为textValue的值
        'html': textValue
    });
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

剩下我们要做的就是把这个新元素插入到我们的页面中了：参考代码： 

var newDiv = function() {
        var bodyWrapVar = $('newElementContainer');
        var idValue = $('id_input').get('value');
        var textValue = $('text_input').get('value');

        var newElementVar = new Element('div', {
                'id': idValue,
                'text': textValue
        });

        // 下面这句是说：“把newElementVar插入到bodyWrapVar的内部顶部”
        newElementVar.inject(bodyWrapVar, 'top');
};

var removeDiv = function() {
        // 这将删除内部的html值（就是div标记类的所有东西）
        $('newElementContainer').erase('html');
}

window.addEvent('domready', function() {
   $('new_div').addEvent('click', newDiv);
   $('remove_div').addEvent('click', removeDiv);
});

更多学习...

一定要花一些时间看一些MooTools文档中的Elements这一节：

• Element这一节包含了我们这里讲到的大多数内容，还有很多其它内容

• Element.style可以给你在元素样式属性上更多的控制权（有些东西我们将在以后的教程中深入讲解）

• Element.dimentions包含了处理位置、坐标、尺寸大小等东西的工具