tools - 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
4000
.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 + ">";
};
}