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 - 属性。默认的按钮类型为submit（另请参阅here）。

<强>型
     按钮的类型。可能的值是：
          - submit ：该按钮将表单数据提交给服务器。 如果未指定属性，或者属性动态更改为空值或无效值，则为默认值。
          - 重置：该按钮将所有控件重置为初始值           - 按钮：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时触发。

添加type="button"，点击该表单将不会被提交。

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

动态创建的Div变得不可见

2 个答案: