使用jQuery添加html元素OOP样式

Question

有没有办法，而不是做这样的事情：

for (item in list){
  $("#myList").append("<option>" + list[item] + "</option>");
}

改为执行以下操作：

for (item in list){
   var option = new option(list[item]);
   $("#myList").add(option);
}

myList是html中的下拉选项。我知道这个例子并不重要，我只是在考虑附加的东西（<option>）会变得更复杂。

由于

Answer 1

使用Option和 select.add （原生函数）：

var select = $("#myList")[0];
for(var item in list){
    var option = new Option(list[item]);
    select.add(option);
}

Answer 2

我通常做这样的事情：

var $opt;
for (item in list) {
    $opt = $('<option/>').text(list[item]).appendTo('#myList');
}

这是一种清晰的，类似OOP的，类似于jQuery的处理方式，还有一个额外的好处，即生成一个将新的HTML元素存储为jQuery对象的变量，以便进一步操作。