MooTools DOM 操作 之 创建和克隆元素

Creating and Cloning Elements (创建和克隆元素)

 

Element Constructor (创建元素)

与原生的JavaScript相比,使MooTools创建元素非常容易,它提供了一个语法,感觉就像是一个类的实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myImg = new Element('img', { 
  'src': '/foo.jpg', 
  'alt': 'this is foo', 
  //class is a reserved word in JS, 
  //so we must use quotes 
  'class': 'fooClass', 
  //In addition to basic attributes, 
  //you can declare special ones: 
  'events': { 
     'click': function(){ alert('click!');} 
  }, 
  'styles': { 
    border: '1px solid blue', 
    marginTop: '10px' 
  }, 
  etc... 
});

注意:

Creating a new element doesn’t inject it into the DOM. You can attach events to it and change its styles and properties, but for it to show up in the browser, you must inject it into the DOM.

作用:

根据指定的元素类型创建新元素

语法:

1
var myElement = new Element(element[, properties]);

参数:

  • element – (mixed) 创建的Element对象的实际DOM元素的标签名
  • properties – (object, 可选) 元素的其他属性

返回值:

  • (element) 一个新的MooTools扩展后的HTML元素

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myAnchor = new Element('a', {
    'href': 'http://blog.moocss.com',
    'class': 'myClass',
    'html': 'Click me!',
    'styles': {
        'display': 'block',
        'border': '1px solid black'
    },
    'events': {
        'click': function(){
            alert('clicked');
        },
        'mouseover': function(){
            alert('mouseovered');
        }
    }
});

我在注意中说过 “Creating a new element doesn’t inject it into the DOM.”。

MooTools 已经提供了 inject(); 方法,我们可以把我们创建的这个元素注入到当前的HTML中。

1
2
3
<div id="wrap">
    <div id="inner">inner</div>
</div>
1
2
3
4
5
6
7
8
9
10
window.addEvent('domready', function() {
    myAnchor.inject('inner','bottom');//插入到内部的底部(bottom,默认)
    //myAnchor.inject('inner');//默认方式
 
    /*
	myAnchor.inject('inner','top');//插入到内部的顶部(top)
	myAnchor.inject('inner','after');//插入到之后(after)
	myAnchor.inject('inner','before');//插入到之前(before)
    */
});

演示:

元素的创建

元素的创建

关于 inject()的使用,我们会在下面的小节中具体介绍的。

Element.clone (复制元素)

复制并返回元素的副本

语法:

var copy = myElement.clone([contents, keepid]);

参数:

  • contents – (boolean, 可选: 默认为true) 如果为true, 则复制的时候连带子元素
  • keepid – (boolean, 可选: 默认为false) 如果true,则复制的副本元素(包括其子元素)将保留原有的id 。

返回值:

(element) 副本元素

Example:

1
2
3
4
5
6
7
8
9
/*
Element.clone 可以接受一个或两个参数,它们都是boolean类型。
不同参数会有不同的作用。
*/
$('inner').clone().inject('inner');
//默认设置,等同于clone(true,false)
$('inner').clone(true,true).inject('inner','after');
$('inner').clone(false,true).inject('inner','after');
$('inner').clone(false,false).inject('inner','after');

演示:

元素的克隆

元素的克隆

站点统计