Dynamisch erstellte Div wird unsichtbar

Question

Ich versuche, ein div dynamisch zu erstellen, indem Sie auf eine Schaltfläche klicken und es dem übergeordneten Namen "option_selection" hinzufügen. Aber das div wird "verschwunden" (ich weiß nicht, was ich sonst noch sagen könnte, denn "unsichtbar" zu sagen, kann etwas anderes bedeuten!).

Hier ist meine JS-Code:

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

hier ist der HTML-Code

 <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> 

Jede mögliche Hilfe würde sehr geschätzt werden. Vielen Dank im Voraus.

Answer 1

Ihre button hat keine type -Attribut. Der Standardtyp der Schaltflächen ist submit (siehe auch here).

Typ
Die Art der Schaltfläche. Mögliche Werte sind:
- senden: Die Schaltfläche sendet die Formulardaten an den Server. Dies ist der Standardwert, wenn das Attribut nicht angegeben ist oder wenn das Attribut dynamisch in einen leeren oder ungültigen Wert geändert wird.
- Zurücksetzen: Die Schaltfläche setzt alle Steuerelemente auf ihre Anfangswerte zurück.
- Schaltfläche: Die Schaltfläche hat kein Standardverhalten. Es kann clientseitige Skripts mit den Ereignissen des Elements verknüpft haben, die beim Auftreten der Ereignisse ausgelöst werden.

Fügen Sie type="button" hinzu und beim Klicken wird das Formular nicht gesendet.

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

Answer 2

Verwenden

document.getElementById(div).innerHTML = element; 

Statt

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