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。构建一个字符串，然后将其添加到innerHTML。

function addNewUpload()
{
    if(formNumber == 1) displayRemove();

    if(formNumber != 10)
    {
        formNumber++;
        var html = " <div id='u_" + formNumber + "' > "
            + " description : <input type='text' name='desc[]' /> <br> "
            + " photo : <input type='file' name='file[]' />   "
            + " </div> ";

        document.getElementById('uploadHolder').innerHTML += html;
    }
    else
    {
        alert("You can only upload 10 photos.");
    }
}

Answer 2

您必须使用以下代码。每次调用.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

Answer 3

浏览器会在第一次追加后关闭它，自动“修复”裸<div>标记。必须使用div关闭</div>元素，如果您不提供</div>

，这将自动完成

您可以通过一次性传递所有内容来避免这种情况，因此不会在两者之间进行修复：

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

使用javascript将分区添加到当前HTML

3 个答案: