通过Javascript操作HTML控件时的良好实践

操作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);
}

var select=document.getElementById（“MyList”）；
var期权=[“1”、“2”、“3”、“4”、“5”]；
对于（变量i=0；i

或者通过操纵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;

var选项=新数组（2）；
选项[0]=“1”；
选项[1]=“2”；
选项[0]=''+选项[0]+''；
选项[1]=''+选项[1]+''；
var newHTML=''+选项[0]+选项[1]+''；
selectList.innerHTML=newHTML；

---

以下哪一项是好的做法？在特定条件下，一种方法比另一种方法更可取吗？

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

总是第一个进近。如果您使用的是innerhtml样式，则浏览器将自行创建。

第一种方法优于第二种方法，即

**创建HTML元素比操作DOM要好”

原因：使用DOM会导致浏览器回流。

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

使用方法：

创建DOM元素：您创建了一个元素。向它添加各种属性并替换它。元素将一次性添加，文档只会回流一次

操作DOM：您需要逐个添加和删除属性或元素。这可能会导致浏览器触发正在操作的所有元素和属性的回流。这将在操作元素时呈现文档流时占用宝贵的资源

因此，创建dom元素要平滑得多，因为浏览器不必再次渲染文档流

*编辑：如果需要插入多个元素，那么最好的方法是插入。文档片段位于内存中，而不是DOM树的一部分。因此，向其添加元素不会引起回流。正如文档所述：

由于文档片段位于内存中，而不是主DOM树的一部分，因此向其添加子元素不会导致页面回流（元素位置和几何图形的计算）。因此，使用文档片段通常会获得更好的性能

---

这会有帮助吗：-？这取决于。你想解决什么具体问题？大多数情况下，人们会想用html定义控件，因此第二种选择似乎更合适，但在不知道你想做什么的情况下，人们无法100%确定。我不想成为debbie downer，但我觉得这个问题主要是观点-based@Renan是的，我知道nk这取决于你是否想用html定义控件。什么时候应该更喜欢用html定义控件？似乎使用innerHTML更快，我总是可以使第二种方法更模块化和可重用。谢谢info@user793468你也需要考虑其他事情…不只是模块化……如果我能模仿的话，请告诉我。我的答案是这样的。我们不是也通过方法1创建浏览器吗？“el.innerHTML=opt；“对不起，我没有看到。如果我在Chrome中删除el.innerHTMLWorks，而不是在IE中删除el.innerHTMLWorks，您不需要el.innerHTML=opt；el.Text=opt；更改为el.Text=opt；看不到列表中的选项。尝试删除Cookie，但仍然不起作用。这似乎是一个孤立的问题。将进一步研究。”