Как JQuery добавить DIV внутрь?

Question

Мне нужен этот результат после кода запуска

  <form>
      <div class="row"><div class="col"><SELECT selectMark>...some options...</SELECT></div></div>
      <div class="row"><div class="col"><SELECT selectModel>...some options...</SELECT></div></div>
  </form>

Мой код

  var form = $("<form></form>");
  var row = $("<div></div>").addClass("row");
  var col = $("<div></div>").addClass("col");

  var selectMark = $("<select></select>").attr("id", "mark"); 
  selectMark.append(markList);

  form.append(row).append(col).append(selectMark);

  var selectModel = $("<select></select>").attr("id", "model"); 
  selectModel .append(modelList);

  form.append(row).append(col).append(selectModel );

Я получаю этот HTML код в выводе

<form>
   <div class="row"></div>
   <div class="col"></div>
   <SELECT selectMark></SELECT>
   <SELECT selectModel></SELECT>

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

Answer 1

Проблема в том, что ваша переменная по-прежнему сохраняет старый div,

, в который вы должны поместить код для l oop, измените append на appendTo как

 var form = $("<form></form>");

  for(var i = 1; i<=3; i++){
  var row = $("<div></div>").addClass("row");
  var col = $("<div></div>").addClass("col");
  col.append("TEST" + i);
  col.appendTo(row)
  row.appendTo(form);

  }
  form.appendTo('body');

 var form = $("<form></form>");
 
  for(var i = 1; i<=3; i++){
  var row = $("<div></div>").addClass("row");
  var col = $("<div></div>").addClass("col");
  col.append("TEST" + i);
  col.appendTo(row)
  row.appendTo(form);
  
  }
  //form.append(row).append(col).append("TEST2");
  //form.append(row).append(col).append("TEST3");
  form.appendTo('body');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

form.append (row) .append (col) .append ("TEST") добавит строку, затем col, а затем "TEST" к элементу формы, так как jQuery цепочка позволяет запускать несколько jQuery методы на одном и том же элементе (ах) . Поскольку вы хотите вложить эти элементы по отдельности, вам необходимо вызвать метод append для каждого из них. Один из способов достижения sh это примерно так:

col.append("TEST");
row.append(col).appendTo(form); // appendTo declares the element you want to append the result of the previous methods to.
$('body').append(form);

Answer 3

Проблема здесь jquery цепочка здесь относится к первому элементу всегда. Вот почему все элементы добавляются только к form. Чтобы вложить их по отдельности, вам нужно будет называть их индивидуально, например:

var form = $("<form></form>");
var row = $("<div></div>").addClass("row");
var col = $("<div></div>").addClass("col");

col.append("TEST")  // Add text node to col first
row.append(col)     // add col to row now
form.append(row)    // add the row to form now

$('body').append(form)  // and finally add the form to body or any parent element you need

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

В форме нескольких добавлений можно использовать строку вместо:

var form = $("<form></form>");

form.append('<div class="row"><div class="col">TEST1</div></div>')
form.append('<div class="row"><div class="col">TEST2</div></div>')
form.append('<div class="row"><div class="col">TEST3</div></div>')

$('body').append(form)

form,.row,.col {margin:5px;padding:5px;border:1px solid #EEE}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

Для произошедшего <select> объекта вы можете использовать:

var form = $("<form></form>");
var divs = '<div class="row"><div class="col"></div></div>';

var selectMark = $("<select/>").attr("id", "mark"); 
selectMark.append($("<option/>").attr("value", 1).text('--- Select Mark ---'));
form.append(divs).find('.row:last .col').append(selectMark)

var selectModel = $("<select/>").attr("id", "model");
selectModel.append($("<option/>").attr("value", 1).text('--- Select Model ---'));
form.append(divs).find('.row:last .col').append(selectModel)

$('body').append(form)

form,.row,.col,select {margin:5px;padding:5px;border:1px solid #EEE}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>