Question

当提供对象数组时，我需要创建一个由嵌套DIV组成的HTML输出。

目前我正在使用以下代码，它可以正常工作。这个例子非常简单，因为在制作中，我有很多对象和复杂的HTML要创建和初始化。

目前我正在使用两个循环，一个用于打开，一个用于关闭DIV。

我想知道你是否可以建议我另一种方法，考虑性能，例如避免双循环等等。

        (function () {
            var html = '';
            var data = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];

            function open(item) {
                html += '<div id="' + item.id + '">';
            }
            function close(item) {
                html += '</div>';
            }

            for (var i = 0, len = data.length; i < len; i++) {
                open(data[i]);
            }
            for (var i = 0, len = data.length; i < len; i++) {
                close(data[i]);
            }
            alert(html);
            /* RESULT
            <div id="a">
                <div id="b">
                    <div id="c">
                    </div>
                </div>
            </div>
            */

        })();

Answer 1

我认为是递归的经典案例。

function createHTML(data) {
    var item = data.shift(), div, child;

    if (item) {
        div = document.createElement("DIV");
        div.id = item.id;
        child = createHTML(data, div);
        if (child) div.appendChild(child);
        return div;
    }
}

createHTML([{ id: 'a' }, { id: 'b' }, { id: 'c' }]);

使用连接字符串构建HTML比使用DOM方法更容易出错，特别是对于恶意或无意中断的输入。因此我通常更喜欢DOM方法。

哪种方法最快 - 由您来衡量，但我建议牺牲纯正的速度而不是正确和有弹性的代码。

Answer 2

像这样使用文档片段

＆＃13;

var i = 0,
    fragment = document.createDocumentFragment();
var data = [{
    id: 'a'
}, {
    id: 'b'
}, {
    id: 'c'
}];

for (var i = 0, len = data.length; i < len; i++) {
    var el = document.createElement('div');
    el.id = data[i].id;
    //el.innerHTML = data[i].id;
    if(i>0 && fragment.getElementById(data[i-1].id)){
        fragment.getElementById(data[i-1].id).appendChild(el);
    } else {
    
    fragment.appendChild(el);
    }
}

document.body.appendChild(fragment);

＆＃13;

#a {
   border: 1px solid red;
    padding:5px;
}

#b {
  border: 1px solid green;
    padding:5px;
}

#c {
   border: 1px solid blue;
    padding:5px;
}

＆＃13;

Answer 3

你可以在一个循环中完成

(function () {
    var html = '';
    var html1 = '';
    var data = [{
        id: 'a'
    }, {
        id: 'b'
    }, {
        id: 'c'
    }];

    function open(item) {
        html += '<div id="' + item.id + '">';
        html1 += '</div>';
    }

   // function close(item) {
   //     html += '</div>';
   // }

    for (var i = 0, len = data.length; i < len; i++) {
        open(data[i]);
    }
    //for (var i = 0, len = data.length; i < len; i++) {
    //    close(data[i]);
    //}
    alert(html+html1);
    /* RESULT
            <div id="a">
                <div id="b">
                    <div id="c">
                    </div>
                </div>
            </div>
            */

})();

Answer 4

DocumentFragment

Why you should always append DOM elements using DocumentFragments

＆＃13;

(function () {
  var frag = document.createDocumentFragment();
  var data = [{ id: 'a', value: 'A' }, { id: 'b', value: 'B' }, { id: 'c', value: 'C' }];
  for (var i = 0, len = data.length; i < len; i++) {
    var div = document.createElement("div");
    div.innerHTML = data[i].value;
    div.id = data[i].id;
    frag.appendChild(div);
  }
  document.body.appendChild(frag);
})();

＆＃13;

创建嵌套DIV - 性能提示

4 个答案:

DocumentFragment