將動態數量的元素添加到表單的最佳方法是什麼？

我有一個複雜的形式，有一個靜態部分和一個可以從0到多個包含單選按鈕，文本字段和文本區域的div。將動態數量的元素添加到表單的最佳方法是什麼？

我想知道什麼是添加元素到具有可變數量的表單輸入部分的最佳方式。我有一個工作解決方案，但它可能不是最好的：我使用JavaScript來添加一段html代碼並將其附加到包含可變數量的輸入字段的div。在下面的代碼示例中，我的JavaScript代碼會做類似

的Javascript

document.getElementId('dynamic_form_stuff').innerHTML += "<div id='element3'>Form stuff</div>";

HTML

<form> 
    <div id="static_form_stuff"> 
    form fields 
    </div> 

    <div id="dynamic_form_stuff"> 
    <div id="element1"> 
     Radio buttons stuff 
     Text field stuff 
     Text area stuff 
    </div>  
    <div id="element2"> 
     Radio buttons stuff 
     Text field stuff 
     Text area stuff 
    </div> 
    </div> 
</form>

來源

2010-06-25 FrancoisCN

我認爲這在很大程度上取決於你在別處做什麼，以及你添加了多少項目，以及你想如何添加事件處理程序。

如果我需要添加事件處理程序，我傾向於更容易地使用DOM方法，但如果您只是通過提交按鈕添加到表單，那麼使用innerHTML會更快，如下所示：http://www.quirksmode.org/dom/innerhtml.html。

來源

2010-06-25 21:22:55

感謝您的回答！因此，我想我處於「如果沒有損壞，不修復」的情況之一？它看起來不正確，難以維護。由sAc（下面）顯示的解決方案在某種程度上更清晰，但同樣令人困惑，因爲我有許多元素（表格，輸入，圖像等）會在div「elements3」中出現。我會有一些元素來創建和追加。 – FrancoisCN 2010-06-27 15:37:51

這取決於您是否添加事件處理程序，或者您希望渲染的速度有多快。這裏有一些權衡。 – 2010-06-27 15:44:23

我會親自做這樣的事情：

var elem = document.getElementId('dynamic_form_stuff'); 
var div = document.createElement('div'); // create element 
div.setAttribute('class', 'myclass'); // define attributes 
elem.appendChild(div); 
// and/or more code.....

這給了我在添加屬性和樣式方面有更多的控制。

來源

2010-06-25 21:20:29 Sarfraz

樣式應該由css完成，並且使用innerHTML很容易添加，但是更多的控制是一件好事，只要您不介意渲染時間更長。 – 2010-06-27 15:45:38

將動態數量的元素添加到表單的最佳方法是什麼？

回答

相關問題