Блог

Главная - Вопросы по программированию - добавление деления к текущему HTML с помощью javascript

добавление деления к текущему HTML с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

У меня есть следующая функция 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>

что я делаю не так?

Ответ №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

Комментарии:

1. отлично 🙂 это работает отлично, но почему мой код не работал?

2. @AhouraGhotbi Это объясняется в нижней части моего ответа.

Ответ №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.");
    }
}

Ответ №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> ";