JS 创建HTML元素的方法

元素创建的三种方式:
    * 1. document.write("标签的代码及内容");
    * 2. 对象.innerHTML="标签及代码";
    * 3. document.createElement("标签的名字");

1、document.write("标签的代码及内容")方式：

缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

2、对象.innerHTML="标签及代码" 方式：

3、document.createElement("标签的名字")方式：

common.js

/**
 * Created by Administrator on 2017-09-18.
 */

function my$(id) {
    return document.getElementById(id);
}

//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
    if(typeof element.textContent=="undefined"){
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}
//获取任意元素的中间的文本内容
function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
        return element.innerText;
    }else{
        return element.textContent;
    }
}


//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
        return element.firstElementChild;
    }else{
        var node=element.firstChild;//第一个节点
        while (node&&node.nodeType!=1){
            node=node.nextSibling;
        }
        return node;
    }
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
        return element.lastElementChild;
    }else{
        var node=element.lastChild;//第一个节点
        while (node&&node.nodeType!=1){
            node=node.previousSibling;
        }
        return node;
    }
}

//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
        element["on"+type]=fn;
    }
}