Javascript 如何在JS中更改生成的HTML中的值？

我使用

js

生成了以下HTML：

var htmlBox = "<div><span class='name'></span><span class='age'></span></div>"

---

我不知道如何使用原始js或jquery来实现这一点。

如果您没有存储字符串的解析html，请尝试以下方法：

for(var i = 0; i < staff.length; i++) {
    var htmlBox = $("<div><span class='name'></span><span class='age'></span></div>");

    htmlBox.find('span.name').text(staff[i]['name']); // Not sure
    htmlBox.find('span.age').text(staff[i]['age']); // doesn't work   

    $("#wrapper").append(htmlBox);
}

---

我建议在每次循环迭代时从HTML字符串创建jQuery对象。

---

另外，由于在您的示例中数组是循环的，直到

i，jQuery在每次更新后都会重建HTML。请尝试以下操作：

var htmlBox = "<div><span class='name'></span><span class='age'></span></div>";

for(var i = 0;i <= staff.length;i++){
    var htmlJObject = $(htmlBox);
    htmlJObject.find('span.name').text(staff[i]['name']); # Not sure
    htmlJObject.find('span.age').text(staff[i]['age']); # doesn't work   

    $("#wrapper").append(htmlJObject.html());
}

var htmlBox=”“；
对于（var i=0；i使用append with template literal来替换来自对象的值


const staff=[{name:'one'，age:25}，{name:'two'，age:30}]；
const htmlBox=document.createElement（'div'）；
staff.forEach（（ele）=>{
htmlBox.append（`${ele.name}
${ele.age}`）；
});
document.getElementById（'root'）.append（htmlBox）；
htmlBox
只是一个字符串，您需要解析它，然后对它进行操作

注

将解析该字符串，但不会使
htmlBox
包含新创建的元素

相反，每次需要新元素时，都需要通过jQuery解析它，调用find（）/text（），然后追加它

for(....){
    let box = $("<div><span class='name'></span><span class='age'></span></div>");
    box.find().text()
    $("#wrapper").append(box)
}

（..）的
{
设框=$（“”）；
box.find（）.text（）
$（“#包装”）.append（框）
}

这将在每次迭代中为您获得一个新元素，然后根据您的需要对其进行操作


staff=[
{姓名：“测试”，年龄：33}，
{姓名：“test2”，年龄：18}，
{姓名：“test3”，年龄：56}，
]
对于（变量i=0；i

使用
.each（）
迭代JSON，并将每次迭代附加到容器中


一种通用迭代器函数，可用于无缝迭代对象和数组。具有长度属性的数组和类似数组的对象（如函数的arguments对象）通过数值索引（从0到length-1）进行迭代。其他对象通过其命名属性进行迭代


var数据=[{
“姓名”：“迈克尔”，
},
{
'姓名'：'约旦'，
}
];
$。每个（数据、功能（i、v）{
$（'#content'）。追加（“+v.name+”）
})

Do
$（htmlBox）。查找…
就像处理字符串一样。
htmlBox
只是一个字符串，除非您没有包含解析字符串的内容jQuery@LawrenceCherone请参见使用
$（htmlBox）
编辑，它不起作用。@PatrickEvans您能告诉我如何使它起作用吗非常感谢！它帮助很大
$(htmlBox).find()....

for(....){
    let box = $("<div><span class='name'></span><span class='age'></span></div>");
    box.find().text()
    $("#wrapper").append(box)
}