4

操作 HTML 控件的好方法是什么？

通过创建 HTML 元素？

var select = document.getElementById("MyList");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.Text = opt;
    el.value = opt;
    el.innerHTML = opt;
    select.appendChild(el);
}

或者通过操作 HTML：

    var options = new Array(2);
    options [0] = '1';
    options [1] = '2';

    options [0] = '<option>' + options [0] + '</option>';
    options [1] = '<option>' + options [1] + '</option>';

    var newHTML = '<select>' + options [0] + options [1] + '</select>';
    selectList.innerHTML = newHTML;

其中哪一个是好的做法？在特定条件下，一个优先于另一个吗？

4

3 回答 3

4

第一种方法看起来更加模块化和可重用。您可能希望将这些行放在一个方法中的 for 循环中并调用该方法。

于 2013-08-12T20:07:55.903 回答
1

总是第一种方法。如果您使用的是 innerhtml 样式，则浏览器正在创建自己。

于 2013-08-12T20:12:32.960 回答
1

第一种方法比第二种方法好，即

**创建一个 HTML 元素比操作 DOM 更好”

原因：使用 DOM 会导致浏览器重排。

例如：假设您需要将一个元素替换为已经存在的 DOM。

使用方法：

  1. 创建 DOM 元素：您创建一个元素。为其添加verious属性并替换它。该元素将一次性添加，并且文档只有一次重排。

  2. 操作 DOM：您需要一一添加和删除属性或元素。这可能会导致浏览器触发所有正在操作的元素和属性的重排。当元素被操作时，这将占用渲染文档流的宝贵资源。

所以创建一个 dom 元素要顺畅得多，因为您的浏览器不必再次呈现文档流。

*编辑： *如果您需要插入许多元素，那么最好的方法是创建一个文档片段。文档片段在内存中，而不是 DOM 树的一部分。因此向其中添加元素不会导致回流。正如文件所说：

由于文档片段在内存中而不是主 DOM 树的一部分，因此将子片段附加到它不会导致页面重排（计算元素的位置和几何形状）。因此，使用文档片段通常会带来更好的性能。

于 2013-08-12T20:22:18.613 回答