Question

I have the following javascript function :

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.");
}
}

the code above works fine except that the holder division with the id='u_"+(formNumber+1)+"' doesnt wrap the content in it self so I get this result :

<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>

what am I doing wrong?

Answer 1

You have to use the code below. Each time you call .innerHTML = .., the string is parsed in an attempt to make it valid HTML. So, unclosed tags are closed, and single closing tags are ignored.

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;

Your code is interpreted as:

+= " <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