動態創建的div越來越隱形

我試圖通過單擊按鈕動態創建div並將其添加到父名稱「option_selection」。但div被'消失'了（我不知道我還能說什麼，因爲'看不見'可能意味着別的東西！）。動態創建的div越來越隱形

這裏是我的JS代碼：

function addMoreOptions(div){ 
    var counter_div = document.getElementById("hidden"); 
    var counter = counter_div.value; 
    counter_div.setAttribute("id","not_hidden"); 
    counter_div.setAttribute("name","not_hidden"); 
    counter++; 
    var addString=""; 
    addString = addString+"<div style="\"width:" 250px;="" float:="" left;="" \"="">"; 
    addString = addString+"<p>Choose option type to display :</p></div>"; 
    addString = addString+"<div style="\"float:" left;\"=""><select id="\"option_type\"" name="\"option_type_";" addstring="addString+counter;"><option value="\"1\"">Single Option (radio button)</option>"; 
    addString = addString+"<option value="\"2\"">Multiple Option (check boxes)</option>"; 
    addString = addString+"<option value="\"3\"">Text Entry (text input box)</option>"; 
    addString = addString+"<option value="\"4\"">Menu(Drop Down)</option></select></div>"; 
    addString = addString+"<div style="\"float:" none;="" clear:="" both;="" width:="" 0px;\"=""></div>"; 
    addString = addString+"<div style="\"width:" 250px;="" float:="" left;="" \"="">"; 
    addString = addString+"<p>Enter option text:</p></div><div style="\"float:" left;\"="">"; 
    addString = addString+"<input type="\"text\"" id="\"option_text_1\"" name="\"option_text_";" addstring="addString+counter;"><input id="\"hidden\"" type="\"hidden\"" name="\"hidden\"" value=""; 
    addString = addString+counter; 
    addString = addString+""></div><div style="\"float:" none;="" clear:="" both;="" width:="" 0px;\"=""></div>"; 
    var element = document.createElement("div"); 
    element.innerHTML= addString; 
    document.getElementById(div).appendChild(element); 
    alert(document.getElementById(div).innerHTML); 
}

這裏是HTML代碼

 <div id="option_selection"> 
      <div> 
       <div style="width: 250px; float: left; "><p>Choose option type to display :</p></div> 
       <div style="float: left;"> 
        <select id="option_type" name="option_type_1"> 
         <option value="1">Single Option (radio button)</option> 
         <option value="2">Multiple Option (check boxes)</option> 
         <option value="3">Text Entry (text input box)</option> 
         <option value="4">Menu(Drop Down)</option> 
        </select> 
       </div> 
       <div style="float: none; clear: both; width: 0px;"></div> 
       <div style="width: 250px; float: left; "><p>Enter option text:</p></div> 
       <div style="float: left;"> 
        <input type="text" id="option_text_1" name="option_text_1"> 
        <input id="hidden" name="hidden" type="hidden" value="1">        
       </div> 
       <div style="float: none; clear: both; width: 0px;"></div> 
      </div>      
     </div>     
     <div align="right" style="width: 800px;"> 
      <button id="add" onclick="addMoreOptions('option_selection')">Add More Option</button>

任何幫助將高度讚賞。在此先感謝。

來源

2012-04-01 Potheek

請將代碼添加到stackoverflow，它可以防止鏈接腐爛。 – max 2012-04-01 12:05:15

製作相關的代碼。 – PeeHaa 2012-04-01 12:06:42

對不起，我沒有得到你們倆說的:( – Potheek 2012-04-01 12:24:23

你button沒有type -attribute。按鈕的默認類型是submit（另請參閱here）。

類型
的類型的按鈕的。可能的值爲：
- 提交：該按鈕將表單數據提交給服務器。 如果未指定屬性，或者屬性動態更改爲空值或無效值，則這是默認值。
- 重置：該按鈕將所有控件重置爲其初始值。
- 按鈕：該按鈕沒有默認行爲。它可以將客戶端腳本與元素的事件相關聯，這些事件在事件發生時觸發。

添加type="button"並點擊表格將不會提交。

<button type="button" id="add" onclick="addMoreOptions('option_selection')">Add More Option</button>

來源

2012-04-01 14:22:42 scessor

非常感謝。我不知道。 – Potheek 2012-04-01 14:28:19

使用

document.getElementById(div).innerHTML = element;

而不是

document.getElementById(div).appendChild(element);

來源

2012-04-01 12:26:21

好吧，我已經試過，但它沒有奏效。此外，我認爲這不應該工作，因爲它試圖添加一個OBJECT到HTML代碼 – Potheek 2012-04-01 12:29:35

好吧我想我得到了答案。當我按下添加更多按鈕腳本實際上是添加div，但它也是提交表單（這很奇怪！我很想知道按鈕提交問題的原因!!!）。在函數調用解決問題後添加「return false;」 – Potheek 2012-04-01 12:48:55

動態創建的div越來越隱形

回答

相關問題