封装一个DivTag,在页面加载的时候自动执行。用于创建任意的DOM节点,并且可以追加到任意的DOM节点上,可以设置样式,添加文本。
var element = {
__init__: function ( tagName ) {
//创建DOM标签
this.DOM = document.createElement( tagName );
},
//追加到dom节点上
appendTo: function ( node ) {
//如果是节点
if ( node.nodeType ) {
node.appendChild( this.DOM );
} else if ( node.DOM ) {
//如果是DivTag
node.DOM.appendChild( this.DOM );
}
return this;
},
//设置文本
html: function ( str ) {
this.DOM.innerHTML = str;
return this;
},
//设置样式
css: function ( option ) {
for ( var k in option ) {
this.DOM.style[ k ] = option[ k ];
}
return this;
},
//添加节点
add: function ( node ) {
if ( node.nodeType ) {
this.DOM.appendChild( node );
} else if ( node.DOM ) {
this.DOM.appendChild( node.DOM );
}
return this;
}
};
//创建一个div标签
function DivTag() {
this.__init__( 'div' );
}
//修改DivTag原型,给原型重新赋值,使原型具有该方法
DivTag.prototype = element;
//创建一个p标签
function PTag() {
this.DOM = document.createElement( 'p' );
}
//使p节点同样可以继承该方法
PTag.prototype = element;
onload = function() {
new DivTag()
.html( '你好啊' )
.add( new PTag().html( '我是 p 标签' ) )
.css( {
border: '1px dashed red'
} )
.appendTo( document.body );
}