Почему javascript визуализирует вещи

Question

Я относительный новичок в JS/Laravel. Я написал этот простой JS, чтобы добавить 2 поля по запросу на мою страницу Laravel Blade. Я хотел, чтобы оба окна ввода были встроенными, а не один поверх другого. Когда я написал JS вроде этого:

$(document).ready(function() { 
    var max_fields  = 4; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x <= max_fields){ //max input box allowed 
         $(wrapper).append(" <div class='form-inline'> "); 
      $(wrapper).append(" <div class='form-group'> "); 
      $(wrapper).append(" <label for='products_id["+x+"]'>Product ID:</label> "); 
      $(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='products_id["+x+"]'> "); 
      $(wrapper).append(" </div>"); 
      $(wrapper).append(" <div class='form-group'> "); 
      $(wrapper).append(" <label for='quantity["+x+"]' style='margin-left:10px'>Quantity:</label> "); 
      $(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> "); 
      $(wrapper).append(" </div> "); 
      $(wrapper).append(" </div> "); 

      x++; //text box increment 
     } 
    }); 

}); 

Это не сработало - когда он преобразуется в HTML, то HTML делает такой:

<div class="input_fields_wrap"> 
    <button class="btn btn-primary add_field_button" style="margin-bottom:5px">Add More Fields</button> 
    <div class="form-inline"> </div> 
    <div class="form-group"> </div> 
    <label for="products_id[1]">Product ID:</label> 
    <input type="text" class="form-control" style="margin-left:5px" name="products_id[1]"> 
<div class="form-group"> </div> 
<label for="quantity[1]" style="margin-left:10px">Quantity:</label> 
<input type="text" 
class="form-control" style="margin-left:5px" name="quantity[1]">  </div> 

АРЕ не находится там, где я хочу их идти вверх, прикручивать все CSS и не помещать текстовые поля в ряд, как я хотел.

Но, когда я делаю это:

$(add_button).click(function(e){ 
     e.preventDefault(); 
     if(x <= max_fields){ //max input box allowed 
      $(wrapper).append(" <div class='form-inline'> <div class='form-group'> <label for='products_id["+x+"]'>Product ID:</label> <input type='text' class='form-control' style='margin-left:5px' name='products_id["+x+"]'> </div> <div class='form-group'> <label for='quantity["+x+"]' style='margin-left:10px'>Quantity:</label><input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> </div> </div>"); 
      x++; //text box increment 
     } 
    }); 

}); 

Он работает.

<div class="input_fields_wrap"> 
<button class="btn btn-primary add_field_button" style="margin-bottom:5px">Add More Fields</button> 
<div class="form-inline"> 
<div class="form-group"> 
<label for="products_id[1]">Product ID:</label> 
<input type="text" class="form-control" style="margin-left:5px" name="products_id[1]"> 
</div> 
<div class="form-group"> 
<label for="quantity[1]" style="margin-left:10px">Quantity:</label> 
<input type="text" class="form-control" style="margin-left:5px" name="quantity[1]"> 
</div> 
</div> 
</div> 

В чем разница? Что мне не хватает?

Answer 1

Это не то, как работает DOM. В глазу браузера каждый тег - это элемент, экземпляр объекта HTMLElement. Вы не можете добавлять открывающие и закрывающие теги отдельно. Вы должны добавить элемент. Метод append анализирует пройденную строку, создает соответствующие элементы DOM и добавляет их в указанное место в DOM.

Если вы передадите ему неправильный HTML-код, вы получите разные результаты в разных браузерах. Например, вызов .append("</div>"); не будет создавать какой-либо элемент в моем браузере Chromium, так как это недопустимая разметка. Сгенерированная разметка первого скрипта не генерирует ожидаемую разметку, так как путем кодирования таким образом все элементы становятся братьями и сестрами, т. Е. Сгенерированные элементы не являются вложенными элементами.

Это один из способа генерирования ожидаемого разметки:

var $col = $("<div class='form-inline'>") // the top level element of the collection 
    .appendTo(wrapper) 
    .append('...') // the appended contents will be child of the `.form-inline` element 

Теперь, если вы хотите добавить элемент (ы) к одному из потомков .form-inline элемента вы должны по первому опрашивать DOM и выберите его:

$col.find('.aChild').append('...'); 

DOM является дерево.

---

Предложение: Если вы хотите генерировать много элементов динамически, вы можете использовать библиотеку шаблонов. Поддержание этого кода без использования библиотеки шаблонов может быть ночным кошмаром .

Answer 2

jQuery создает DOM по мере добавления.

При добавлении DIV, например:

$(wrapper).append(" <div class='form-group'> "); 

Jquery является добавление DIV, и закрывающий его. Вы можете увидеть это в своем первом результате.

Когда вы добавляете элемент, включайте его закрывающий тег.

Лучше всего сначала построить строку html, а затем добавить все сразу.

s="<div class='form-group'> "+ 
" <label for='products_id["+x+"]'>Product ID:</label> "+ 
" <input type='text' class='form-control' style='margin-left:5px' name='products_id["+x+"]'> "+ 
" </div>"+ 
" <div class='form-group'> "+ 
" <label for='quantity["+x+"]' style='margin-left:10px'>Quantity:</label> "+ 
" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> "+ 
" </div> "+ 
" </div> " 
$(wrapper).append(s); 

Answer 3

Метод JQuery Append (http://api.jquery.com/append/) интерпретирует строку в HTML элемент, и добавляет его в DOM:

$(wrapper).append(" <div class='form-group'> "); 

Когда вы получаете вокруг добавления закрывающего тега позже, это слишком поздно. Кроме того, когда вы добавляете в DIV к обертке, вы добавив его непосредственно, то есть это результат строки в новом дочернем элементе оберточного элемента:

$(wrapper).append(" <input type='text' class='form-control' style='margin-left:5px' name='quantity["+x+"]'> "); 

... и не ребенка из элемент группы форм.

Если вы хотите, чтобы ваши элементы были вложенными, вы должны добавить их вложенным образом, каждый из которых является его родителем, а не далеким предком. Если вы хотите добавить большой кусок html, вам нужно сделать это за один раз, чтобы его можно было интерпретировать как большой элемент элементов сразу.