封装一个DivTag

标签：

封装一个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 );
}

封装一个DivTag

标签：

原文地址：http://www.cnblogs.com/landofpromise/p/5751553.html