動的に作成されたDivが非表示になっています

Question

ボタンをクリックしてdivを動的に作成し、親の名前「option_selection」に追加しようとしています。しかし、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> 

すべてのヘルプは高く評価されるだろう。 ありがとうございました。

Answer 1

あなたbuttonにはtype -attributeを持っていません。デフォルトのボタンタイプはsubmit（hereも参照）です。

タイプ
ボタンの種類。可能な値は次のとおりです。
- submit：ボタンはフォームデータをサーバーに送信します。 属性が指定されていない場合は、、または属性が空の値または無効な値に動的に変更された場合の既定値です。
- リセット：このボタンは、すべてのコントロールを初期値にリセットします。
- ボタン：このボタンにはデフォルトの動作はありません。イベントの発生時にトリガされる、要素のイベントに関連付けられたクライアント側のスクリプトを持つことができます。

を追加してクリックすると、フォームは送信されません。

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

Answer 2

使用

document.getElementById(div).innerHTML = element; 

代わりの

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