我有以下 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>
我做错了什么?
最佳答案
您必须使用下面的代码。每次调用 .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
关于javascript - 使用 javascript 将除法添加到当前 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7941953/