使用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
}