document.createElement的快捷方式（「選項」）？

我的功能清除了一個下拉列表，然後重新填充它。我真的需要這些嗎？還是有更簡潔的方法來做到這一點？這意味着我需要創建一個新的document.createElement（「選項」）;或者有沒有捷徑？document.createElement的快捷方式（「選項」）？

 for (blah blah blah) 
     { 
      objNewOption = document.createElement("option"); 
objNewOption.value = day; 
objNewOption.text = day; 
birthDay.options.add(objNewOption); 
     }

來源

2009-11-06 PositiveGuy

真的那麼長嗎？這不是很重要。

如果你想使用框架，如MooTools或Prototype，它們有一個Element類，讓你在一行中完成。

來源

2009-11-06 19:22:32 seanmonstar

document.createElement技術的最大問題是它真的很慢。使用框架是最好的，但無論哪種方式，我都會建議構建選項列表並在選擇框中設置innerHTML屬性。

strOptions = ""; 
for (blah blah blah) 
{ 
    strOptions += '<option value="' + day + '">' + day + '</option>' 
} 
birthDay.innerHTML = strOptions;

瀏覽器將能夠解析HTML的速度比您能夠手動構建這些元素快得多。

爲了迴應評論，這就是爲什麼使用平臺庫永遠值得。在YUI3中，我這樣做：

var fillSelectbox = function(select, optionList) { 
    var i, option = ''; 
    for (i = 0; i < optionList.length; i += 1) { 
     option += '<option value="' + optionList[i].Value + '" selected="' + (optionList[i].selected ? '"selected"' : '""') + '">' + optionList[i].Text + '</option>'; 
    } 
    select.append(option); 
    select.set('selectedIndex', -1); 
};

其中，select是selectNode，optionList是JavaScript數組。

來源

2009-11-06 19:29:58 foxxtrot

除了在IE（甚至8），不能正確設置SELECT標籤的innerHTML。 – seanmonstar 2009-11-06 20:03:36

請解釋如何使用框架可以加速DOM操作... – Christoph 2009-11-06 21:22:37

該框架規範了底層瀏覽器實現中的錯誤，允許我在Internet Explorer上設置必須更快的innerHTML樣式。即使使用平臺，構建一個文本字符串而不是大量的選項標籤也會更快，這對處理相對較大的數據集非常重要。 – foxxtrot 2009-11-06 21:58:20

var new_option_element = new Option(display_label, value, selected_boolean);

來源

2009-11-06 19:38:05 Quentin

創建您自己的快捷...

function x() { return document.createElement("option"); } 

for(blah blah blah) { 
    objNewOption = x(); 
}

來源

2009-11-06 20:48:31

document.createElement的快捷方式（「選項」）？

回答

相關問題