使用javascript和jquery為值字符串編寫HTML？

Question

我希望頁面的html顯示為：

<div class='container'>
  <div class='domain-list0'>Hello</div>
  <div class='domain-list1'>World</div>
</div>

這是我的html和js： Codepen.io的筆

而不是創建第一個“域列表”，然后為下一個創建另一個域列表，它只是覆蓋了先前的“域列表”。 這就是為什么它顯示最后一個字符串值的原因。 有人知道怎么修這個東西嗎？

謝謝！

Answer 1

您正在使用.html（）刪除現有內容，並將其替換為新內容。 您需要使用append，以便在最后一個子項之后添加新內容。

var myStringArray = ["Hello", "World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    var $el = $("<div  />", {
        'class': 'domain-list' + i,
        html: "<p>" + myStringArray[i] + "</p>"
    }).appendTo("div.container");
    // $el refer to the newl added element
}

演示： 小提琴

• 使用.appendTo（），以便它將返回新創建的元素，該元素可用於進一步處理

Answer 2

for (var i = 0; i < arrayLength; i++) {
  $("div.container").html("<div class='domain-list'></div>");
  $(".domain-list:nth-child("+i+")").html("<p>"+myStringArray[i]+"</p>");
  //Do something
}

Answer 3

嘗試在jquery中使用appendTo

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  $("<div class='domain-list"+i+"'></div>").html("<p>"+myStringArray[i]+"</p>").appendTo("div.container");
  //Do something
}