Javascript 动态创建的Div变得不可见

我试图通过单击按钮并将其添加到父名称“option\u 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);
}

函数添加更多选项（div）{
var counter_div=document.getElementById（“隐藏”）；
var计数器=计数器分区值；
计数器分区setAttribute（“id”，“未隐藏”）；
计数器分区setAttribute（“名称”、“未隐藏”）；
计数器++；
var addString=“”；
addString=addString+“”；
addString=addString+“选择要显示的选项类型：
”；
addString=addString+“单个选项（单选按钮）”；
addString=addString+“多选项（复选框）”；
addString=addString+“文本输入（文本输入框）”；
addString=addString+“菜单（下拉）”；
addString=addString+“”；
addString=addString+“”；
addString=addString+“输入选项文本：
”；
addString=addString+“”；
var元素=document.createElement（“div”）；
element.innerHTML=addString；
document.getElementById（div.appendChild（元素）；
警报（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>

选择要显示的选项类型：

单个选项（单选按钮）
多选项（复选框）
文本输入（文本输入框）
菜单（下拉菜单）
输入选项文本：

添加更多选项

任何帮助都将不胜感激。 提前感谢。

使用

document.getElementById(div).innerHTML = element;

而不是

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

---

您的

按钮

没有

类型

-属性。默认类型的按钮是

submit

（另请参见）

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

添加

type=“button”

，然后单击该表单将不会提交

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

添加更多选项

请在stackoverflow上添加代码，它可以防止链接损坏。请编写相关代码。对不起，我无法理解你们两位所说的：（你可以在这里看到HTML页面好的，我已经尝试过了，但是它不起作用。此外，我认为这不应该起作用，因为它试图向HTML代码中添加一个对象。好的，我想我得到了答案。当我按下“添加更多”按钮时，脚本实际上正在添加div，但它也在提交表单（这很奇怪！我想知道按钮提交问题的原因！！！）。在函数调用后添加“return false；”解决了问题。非常感谢。我不知道。