如何循环运行我的 div 的全部内容？

Question

我无法使用 for 循环附加 div 的内容。 在代码下创建了一个新的 div，但是，循环中不包含以下内容：

 <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

你在一个正确的方向。 由于您的 div 缺少视觉（在 UI 中显示）的文本部分，这就是它没有出现的原因。

看看下面的代码。

 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>

Answer 2

您只需要创建一个 Elements 数组，可以将其推入该数组中，并通过.html()函数进行渲染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);

注意 ****使您的代码尽可能简单。