摘要：源代碼把類數(shù)組對象轉(zhuǎn)換為數(shù)組。節(jié)點對象返回被替代的節(jié)點對象節(jié)點對象被替代成可以運行的如果是節(jié)點對象，則替代為可運行的節(jié)點對象遞歸字符串轉(zhuǎn)成文檔片段節(jié)點對象。返回文檔片段節(jié)點對象用于擴展方法。

寫于：2017-1-2 | 更新于：2017-1-3

appendChild方法的缺點有兩個：

不能傳多個參數(shù)

參數(shù)只能是節(jié)點對象

這里給Node.prototype添加一個方法，名稱為：appendChildPlus，可以認為是appendChild的加強版，特點如下：

參數(shù)可以是html字符串和節(jié)點對象

可以傳多個參數(shù)

script標簽字符串和新建的script節(jié)點對象插入文檔以后可以正常運行

所有參數(shù)是一起插入指定節(jié)點的，而不是一個一個插入。

// appendChildPlus.js
/**
 * Created by jszhou on 2017/1/2.
 * updated by jszhou on 2017/1/3.
 */
(function () {
    /**
     * 把類數(shù)組對象轉(zhuǎn)換為數(shù)組。
     */
    var toArray = Array.from || function (arg) {
            return Array.prototype.slice.call(arg);
        };

    /**
     * 判斷參數(shù)是否為節(jié)點對象。
     * @param {?} arg
     * @return {boolean}
     */
    function isNode(arg) {
        return arg instanceof Node;
    }

    /**
     * 判斷參數(shù)是否為script節(jié)點對象。
     * @param {?} arg
     * @return {boolean}
     */
    function isScript(arg) {
        return isNode(arg) && arg.nodeName.toLowerCase() === "script";
    }

    /**
     * 復(fù)制script節(jié)點對象，復(fù)制以后script標簽的內(nèi)容可以運行。
     * @param {object} script script節(jié)點對象
     * @return {object} 返回新的script節(jié)點對象
     */
    function copyScript(script) {
        var newScript = document.createElement("script");

        // 復(fù)制屬性
        toArray(script.attributes).forEach(function (item) {
            newScript.setAttribute(item.nodeName, item.nodeValue);
        });

        newScript.innerHTML = script.innerHTML;

        return newScript;
    }

    /**
     * 替代script節(jié)點對象，替代以后script標簽的內(nèi)容可以運行。
     * @param {object} node 節(jié)點對象
     * @return {object} 返回script被替代的節(jié)點對象（script節(jié)點對象被替代成可以運行的）
     */
    function replaceAllScript(node) {
        Array.prototype.forEach.call(node.childNodes, function (item) {
            // 如果是script節(jié)點對象，則替代為可運行的script節(jié)點對象
            if(isScript(item)) {
                item.parentNode.replaceChild(copyScript(item), item);
                return;
            }
            // 遞歸
            if(item.childNodes.length > 0){
                replaceAllScript(item);
            }
        });

        return node;
    }

    /**
     * 字符串轉(zhuǎn)成文檔片段節(jié)點對象。
     * @param {String} str 字符串，可以包含script標簽，轉(zhuǎn)換完插入文檔以后可以運行。
     * @return {Object} 返回文檔片段節(jié)點對象
     */
    function strToNode(str) {
        var docFrag = document.createDocumentFragment(),
            div = document.createElement("div");

        div.innerHTML = str;

        toArray(replaceAllScript(div).childNodes).forEach(function (item) {
            docFrag.appendChild(item);
        });

        return docFrag;
    }

    /**
     * 用于擴展appendChild方法?？梢詡魅雋tml字符串和節(jié)點對象，可以傳多個參數(shù)。
     * 如果html字符串中有script標簽，插入以后可以正常運行。
     * 注意，所有參數(shù)是一起插入指定節(jié)點的，而不是一個一個插入。
     */
    Node.prototype.appendChildPlus = function () {
        var docFrag = document.createDocumentFragment();

        toArray(arguments).forEach(function (arg) {
            docFrag.appendChild(isNode(arg) ? arg : strToNode(String(arg)));
        });

        this.appendChild(docFrag);
    };
})();

// extend.js
var wrap = document.querySelector(".js-wrap"),
    deepScript = "
",
    newScriptNode = document.createElement("script"),
    outerScript = "";

newScriptNode.textContent = "wrap.append("newScriptNode");";

wrap.appendChildPlus(deepScript, newScriptNode, outerScript, "
nihao
");

// outerScript.js
wrap.append("outerScript");

    

    
    
    
nihao
    deepScript
    newScriptNode
    outerScript

本擴展的markdown和demo源文件在github上，點擊這里查看