Как запустить весь контент моего div в al oop?

Question

У меня проблемы с добавлением содержимого моего div для l oop. Новый код div создается под кодом, однако в l oop не включается следующее:

<div class="row">

//not included in loop
        <div class="col-md-2 hour time-block" value="9:00">
          <p>9:00</p>
        </div>
        <div class="col-md-8 textarea"></div>
        <button class="col-md-2 saveBtn">Save</button>
//not included in loop

      </div>

Это мой текущий код: HTML

for (let i = 0; i < 9; i++) {
  let newDiv = document.createElement("div");
  newDiv.id = "hour" + i;
  newDiv.className = "row";
  $(".container").append(newDiv);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <!-- Timeblocks go here -->
  <div class="row">
    <div class="col-md-2 hour time-block" value="9:00">
      <p>9:00</p>
    </div>
    <div class="col-md-8 textarea"></div>
    <button class="col-md-2 saveBtn">Save</button>
  </div>
</div>

Answer 1

Вам просто нужно создать массив элементов, которые можно вставить в массив, и визуализировать с помощью . html () function Working JS Fiddle Link

Ваш js должен быть

let list = [];

for (let i = 0; i < 9; i++) {

 list.push(`<div id="hour${i}" class="row">Your ${i} Row </div>`); 

}

$(".container").html(list);

Примечание **** Сделайте ваш код максимально простым.

Answer 2

Вы в правильном направлении. Поскольку в вашем div отсутствует текстовая часть для визуала (отображение в пользовательском интерфейсе), поэтому он не отображается.

Посмотрите на приведенный ниже код.

for (let i = 0; i < 9; i++) {
 // This is jQuery way of appending the div. if you want to reuse your code add this line newDiv.textContent = i;
  let p = $('<p/>').text('para ' + i); // This is missing. Add this to display.
  let div = $('<div/>').addClass('row').attr("id", "hour" + i);
  div.append(p);
  $(".container").append(div);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-2 hour time-block" value="9:00">
      <p>9:00</p>
    </div>
    <div class="col-md-8 textarea"></div>
    <button class="col-md-2 saveBtn">Save</button>
  </div>
</div>