js动态添加任何html标签

编程思路: 

我认为, 对于html标签来说, 分为闭合和半闭合两种, 

当我用js创造一大片html代码的时候, 会容易出现很杂乱的观感,而且并不容易维护. 

那么我将创建闭合和半闭合标签作为两个方法, 每次创建就调用一次, 返回字符串类型的HTML代码,

然后用$....append() 或者 DOM的innerHTML加入就可以

 

建议: 配合JQuery食用更佳, 当然document.....innerHTML也可以.

 

格式示例: 

    let create = new CreateNode();                            // 必须的

    let code = create. packageNode("div", {

            // 你可以在这里加上所有你喜欢的属性节点,

            // 但请要注意的是, content属性是用来生成闭合标签内部内容的, 所以这点要留意

            // 另外, 由于packageNode 和 halfPackageNode都只是返回字符串, 那么你可以在content里嵌套你的其他标签

            class: 'div-class',            

            id: 'wokao',

            content: '包含的内容' + create.packageNode("div", {

                     content: "内容2"  

             })

})

$("body").append(code)        // 添加到html文档

 

使用方法 和 参数解释:

 let create = new CreateNode();     // 必须, 第一步

create.packageNode( ['标签名'], ['属性名(content属性是闭合标签内的内容)'] )         // 创建闭合标签

create.halfPackageNode( ['标签名'], ['属性名(请不要填写content属性, 填写了也没用)'] )         // 创建半闭合标签

 

实现代码:

// 创建元素节点
// :method halfPackageNode: 创建半闭合节点
// :method PackageNode: 创建闭合节点
function CreateNodes() {
    if (!this instanceof CreateNodes) return new CreateNodes();

    // 创建半闭合节点
    // :param nodeName: [String] 节点名称
    // :param obj: [Object] 属性集合
    // :return [String] 返回对应的HTML代码
    this.halfPackageNode = function (nodeName, obj) {
        // 数据检查
        if (typeof nodeName !== 'string') return false;
        let objType = Object.prototype.toString.call(obj).slice(8, -1);
        if (objType !== 'Object') return false;

        // 组装属性
        let property = '';
        for (let i in obj) {
            if (Object.prototype.toString.call(obj[i]).slice(8, -1) === 'Function') {
                obj[i] = obj[i]();
                !obj[i] && (obj[i] = '');
            }
            property += (" " + i + "='" + obj[i] + "'");
        }

        // 返回html代码
        return "<" + nodeName + property + " />";
    };

    // 创建闭合节点
    // :param nodeName: [String] 节点名称
    // :param obj: [Object/String] 属性集合(content属性是节点内容,如果是字符串,那么直接加入节点内)
    this.packageNode = function (nodeName, obj) {
        // 数据检查
        if (typeof nodeName !== 'string') return false;
        let objType = Object.prototype.toString.call(obj).slice(8, -1);
        if (objType === 'Array' || objType === 'Function') return false;

        // 组装代码
        let property = '', content = '';
        if (objType === 'String') content = obj;
        else {
            let i = 0, key = Object.keys(obj), len = key.length;
            for (; i < len; i++) {
                // 如果对象属性值是一个函数, 那么执行函数
                if (Object.prototype.toString.call(obj[key[i]]) === '[object Function]') {
                    obj[key[i]] = obj[key[i]]();
                    !obj[key[i]] && (obj[key[i]] = '');
                }

                // 如果对象拥有"content"属性, 把值抽出来,并删除其属性
                if (key[i] === 'content') {
                    content = obj['content'];
                    continue;
                }

                // 组装节点属性
                property += " " + key[i] + "='" + obj[key[i]] + "'";
            }

        }
        return "<" + nodeName + property + ">" + content + "</" + nodeName + ">";
    };
}