程式設計思路: 

我認為, 對於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 + ">";
    };
}