快速创建元素

一、快速创建元素简介

 快速创建元素简写为$$，全称为U.quickCreate,使用此方法可以精简代码,并使逻辑更加清晰。
写法说明： 创建一个div元素，赋予单击事件，并追加到body中。
   简写为：
   $$("div",{"style":{"cssText":"width:100px;height:100px;background-color:red;"},"onclik":"alert('123')"},document.body);
   全写为：
   U.quickCreate("div",{"style":{"cssText":"width:100px;height:100px;background-color:red;"},"onclik":"alert('123')"},document.body);

示例一: 快速创建一个长和宽为100px 背景为红色的div元素并且添加到示例结果区域 
    原生JavaScript的写法：
        var div = document.createElement('div');
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = 'red';
        div.style.margin = '10px auto';
        document.getElementById('resultarea').appendChild(div);
    采用框架的写法：  
        //使用Uform框架后，一句代码即可实现原生5句代码量实现的功能，因此该功能可以大大加快平时的开发速度。
        $$('div', {'style': {'width': '100px', 'height': '100px', 'background-color': 'red', 'margin': '10px auto'}}, $('#resultarea')[0]);

示例二：快速创建一个button（按钮）并定义其的id为testButton，再为其绑定一个点击事件,最后将其添加到示例结果区域
    原生JavaScript的写法：
        var button = document.createElement('button');
        button.id = 'testButton';
        button.value = 'Testbutton';
        button.onclick = function(){
            alert('My ID is testButton');
        }
        document.getElementById('resultarea').appendChild(button);
    采用框架的写法：框架提供的快速创建功能不仅支持元素样式的设，同样也支持属性的设置如id,value,className等等，同样也支持对事件的绑定。
        $$('button', {'id': 'testButton', 'innerHTML':'Testbutton', 'onclick': function() { alert('My ID is testButton');  }}, $('#resultarea')[0]);

示例三：快速创建一个div 并给这个div添加className属性testElement，值为和自定义属性name值为testElement，再为其绑定一个点击事件,最后将其添加到示例结果区域。
        $$('div',{'class': 'testElement', 'name': 'testElement','onclick': function() { alert('My Name is testElement');} }, $('#resultarea')[0]);

示例四：在指定元素下的指定子元素前添加元素,该案例是在id为resultarea的元素下的第一个子元素之前添加元素。
     原生JavaScript的写法：
        var div = document.createElement('div');
        div.className = 'testElement testElementBefore';
        div.name = 'testElement';
        var resultarea=document.getElementById("resultarea")
        resultarea.insertBefore(div,resultarea.childNodes[0]);
    采用框架的写法：
        $$('div',{'class': 'testElement testElementBefore', 'name': 'testElement' }, $('#resultarea')[0], $('#resultarea').Child()[0]);
注释：
    $('#resultarea')[0] 为获取id为resultarea的元素 该元素就是页面中结果展示区域。

示例一(可在编辑区域修改)：

运行结果展示区域：

 

    作者： 14互联网G5-2 杨思强 


    信息录入: 14互联网G5-2 杨思强