0

我的研究并没有被证明是非常成功的，因为我真的不知道如何解释它，而不是举例说明。

考虑以下：

你有一个网页。网页的一个 div 将是动态的，这意味着它将加载不同的内容，如表格、段落等。

让我们将 div 的 id 设置为 'main' 并为方便起见：

var main = document.getElementById("main");

现在，这是棘手的部分：当你想改变它的孩子时，你有两个选择：

1) 移除所有孩子；在 javascript 中为每个新元素创建一个变量；样式它；设置内部html；附加。例子：

//Consider that the children have already be cleared
     var p = document.createElement("p");
        p.innerHTML = "Hello World";
        p.className = "style";
        main.appendChild(p);

    var p2 = document.createElement("p");
    p2.innerHTML = "Goodbye world!";
    p2.className = "byeStyle";
    main.appendChild(p);

2）将变量的内部html设置为，基本上是你想要的。示例 2：

 main.innerHTML = '<p class="style">Hello world!</p>' +
                    '<p class="byeStyle">Goodbye world!</p>';

两者都可以正常工作。哪个是首选，哪个性能更好？

4

1 回答 1

2

一般来说，除非你在一个紧密的循环中一遍又一遍地这样做，否则这并不重要。

公认的智慧是使用.innerHTML速度更快，但在现代浏览器上却不一定如此。

参见例如http://jsperf.com/node-creation-html-vs-dom/2，在 Chrome 版本 28 上使用原始 DOM 访问比使用.innerHTML.

于 2013-07-24T08:51:24.007 回答