javascript htcontents在html中无法正确显示

我有一个HTML表单，用户应该能够为给定的问题添加其他文本框。但在任何文本输入之前，都会有一个下拉菜单选择，每次选择后文本框都会变为可见（也取决于选择，可见文本框数量会发生变化）。这里是javascript

    var var1=1;
        function addAffiliation(){
                    var newArea = addNew();
                    var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 
                        + "<br/><br/>"; 
                    document.getElementById(newArea).innerHTML = htcontents;             
                }
        function addNew() {
                    var1=var1+1;       
                    var var2 = document.getElementById('area');
                    var newdiv = document.createElement('div');
                    var divIDName = 'Div #'+ var1;
                    newdiv.setAttribute('id',divIDName);
                    ni.appendChild(newdiv);
                    return divIDName;
               }

@阿拉姆

我想要一个下拉菜单

<option name="first">selection 1</option>
<option name="second">selection 2</option>

然后他又看到

<option name="first">selection 1</option>
    <option name="second">selection 2</option>

选择1
选择2

等等。。现在清楚了吗？

改变

var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 

var htcontents=“”

到

var htcontents=“”

---

ie对字符串中的双引号进行转义。

我不确定您在那里做了什么，因为字符串附近的addAffiliation中存在语法错误。您应该对整个字符串使用单引号，对属性值使用双引号，并在需要时使用

+

连接js变量。您必须转义与字符串定义为

\

的引号相同的引号

另外，我认为

ni

应该读

var2

。一般来说，永远不要将变量命名为variableX，因为它不会告诉我们什么（我们知道它是一个变量！）。此外，我将考虑使用jQuery来简单地与元素交互。 看

var var1=1；
函数addAffiliation（）{
var newArea=addNew（）；
var htcontents='

'；
document.getElementById（newArea）.innerHTML=htcontents；
}
函数addNew（）{
var1=var1+1；
var var2=document.getElementById（'area'）；
var newdiv=document.createElement（'div'）；
var divIDName='Div#'+var1；
newdiv.setAttribute（'id'，divIDName）；
var2.appendChild（newdiv）；
返回divIDName；
}
addAffiliation（）；
​

---

​

解决方案与ManseUK的建议非常接近

var htcontents ="<input placeholder='categories..'  
class='input_box' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>"

var htcontents=“”

应该是

var htcontents ="<input placeholder=\'categories..\'  //notice slashes
class=\'input_box\' name=\'categories[]\' //notice slashes
onchange=\'display(this, \'field2\', \'field3\', \'field4\');\'/>" //notice slashes

var htcontents=”“//注意斜杠

---

希望这对任何人都有帮助。

display（）函数在哪里？不在这里吗？它似乎是一种非常混乱的处理方式，这就是为什么在jquery中附加一个单击事件处理程序并在同一个js文件中执行所有操作都比这个好的原因。嗨，阿拉姆，我尝试了你的建议并使用了双引号，但似乎没有什么变化。我不熟悉jQuery，这就是我尝试编写代码的原因。查看并运行脚本，您将看到在div中添加的文本框，您可以从中复制代码。对于jQuery，只需通过。但是jQuery只在

document.getElementById（newArea.innerHTML=htcontents

将是

$（'#'+newArea）.html（htcontents）等等。再次感谢阿拉姆。事实上，我可以添加文本框，但当创建新div时，用户会看到一个下拉列表，之后与选择相关的文本框不会出现。哦，所以另一个问题是显示。。。我不知道你想做什么，请在问题中解释一下显示器的实际功能。
field3:< input name="field3".....>
field4:< input name="field4".....>
field5:< input name="field5".....>

addReference();

<option name="first">selection 1</option>
    <option name="second">selection 2</option>

var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 

var htcontents ="<input placeholder=\"categories..\"  
class=\"input_box\" type=\"textbox\" name=\"categories[]\" 
onchange=\"display(this, 'field2', 'field3', 'field4');\"/>" 

var var1=1;
function addAffiliation(){
    var newArea = addNew();
    var htcontents ='<input placeholder="categories.." class="input_box" type="textbox" name="categories" onchange="javascript:display(this, \'field2\', \'field3\', \'field4\');"/><br/><br/>'; 
    document.getElementById(newArea).innerHTML = htcontents;             
}
function addNew() {
    var1=var1+1;       
    var var2 = document.getElementById('area');
    var newdiv = document.createElement('div');
    var divIDName = 'Div #'+ var1;
    newdiv.setAttribute('id',divIDName);
    var2.appendChild(newdiv);
    return divIDName;
}

addAffiliation();
​

var htcontents ="<input placeholder='categories..'  
class='input_box' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>"

var htcontents ="<input placeholder=\'categories..\'  //notice slashes
class=\'input_box\' name=\'categories[]\' //notice slashes
onchange=\'display(this, \'field2\', \'field3\', \'field4\');\'/>" //notice slashes