javascript - 使用 javascript 将除法添加到当前 HTML

Question

我有以下 JavaScript 函数:

function addNewUpload()
{

if(formNumber == 1){
displayRemove();
}

if(formNumber != 10){
document.getElementById('uploadHolder').innerHTML += " <div id='u_"+(formNumber+1)+"' > ";
document.getElementById('uploadHolder').innerHTML += " description : <input type='text' name='desc[]' /> <br> ";
document.getElementById('uploadHolder').innerHTML += " photo : <input type='file' name='file[]' />   ";
document.getElementById('uploadHolder').innerHTML += " </div> ";
formNumber = formNumber + 1;
}else{
alert("You can only upload 10 photos.");
}
}

上面的代码工作正常，除了带有 id='u_"+(formNumber+1)+"' 的持有者划分没有将内容包装在它自己中，所以我得到这个结果:

<div id="u_2"> </div> 
description : <input type="text" name="desc[]"> <br>
  photo : <input type="file" name="file[]">      
<div id="u_3"> </div> 
description : <input type="text" name="desc[]"> <br>  
photo : <input type="file" name="file[]">     
 <div id="u_4"> </div> description : <input type="text" name="desc[]"> <br>  photo : <input type="file" name="file[]">     </div>

我做错了什么？

Answer 1

您必须使用下面的代码。每次调用 .innerHTML = .. 时，都会对字符串进行解析，尝试使其成为有效的 HTML。因此，未关闭的标签将被关闭，单个关闭标签将被忽略。

var html = " <div id='u_"+(formNumber+1)+"' > ";
html += " description : <input type='text' name='desc[]' /> <br> ";
html += " photo : <input type='file' name='file[]' />   ";
html += " </div> ";
document.getElementById('uploadHolder').innerHTML += html;

您的代码被解释为:

+= " <div id='u_"+(formNumber+1)+"' > </div>";                 // Added </div>
+= " description : <input type='text' name='desc[]' /> <br> "; // Same
+= " photo : <input type='file' name='file[]' />   ";          // Same
+= " </div> ";                                                 // Ignored