Question

を使用して、現在のHTMLへの分裂を追加：

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)+"'のdoesntとそのホルダー部門を除いて正常に動作します私はこの結果を得るように、それ自身でコンテンツをラップ：

<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>タグを「修正」します

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

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 3

。 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> ";