Javascript JS cloneNode（）并更改子项的值

也许我已经盯着这个看太久了。 我试图为数据集中的每个项目复制一个节点（一组HTML）。然后，对于每个节点，将node.children.children的值更改为数据集中相应的值

这是我的建议

更新：我清除了克隆的节点，创建了元素，添加了数据，使其正常工作。看这个，但是，我不满意

更新2：我也必须在某个时候删除这些。我应该用每个数据集构建这些节点吗？每次击键我都会收到axios的数据（实时搜索）

我想知道的是是否有更好的方法。如果数据集仅扩展到这3个项目，则更易于读取/维护。如果它确实扩展了，则必须有人返回并更改列表和变量（prop_list）

以下是一些人建议的JS和HTML：

成员列表=[{
“模型”：“成员.骑手”，
"pk":1,，
“字段”：{
“名字”：“Shane”，
“姓氏”：“脸颊”，
“电话号码”：“222-222-2222”，
“电子邮件”：Shane@email.com",
“活动”：真
}
}, {
“模型”：“成员.骑手”，
"pk":2,，
“字段”：{
“名字”：“其他”，
“姓氏”：“骑手”，
“电话号码”：“333-333-3333”，
“电子邮件”：Other@email.com",
“活动”：错误
}
}]
对于（让我加入成员名单）{
让name=成员列表[i]。fields.firstName+“”+成员列表[i]。fields.lastName；
让phoneNumber=member_list[i].fields.phoneNumber；
让email=member_list[i].fields.email；
let prop_list=[姓名、电话号码、电子邮件]
让result_block=document.querySelector（“result_block”）；
让result_group=document.querySelector（“result_group”）；
让member_data=document.querySelector（“#member_data_left”）；
让克隆的\u result\u group=result\u group.cloneNode（true）；
结果\u块.appendChild（克隆的\u结果\u组）；
克隆的_结果_group.style.display=“”
让克隆的成员数据=克隆的结果组。查询选择器（“成员数据左”）
克隆的成员数据。innerHTML=“”
for（让p进入prop_列表）{
让para=document.createElement（“p”）
让text=document.createTextNode（属性列表[p]）
第2段（案文）
克隆的成员数据。追加子项（第
}
}

姓名

电话号码

电子邮件

您真的应该像这样检查模板库。它们旨在以最高效和可维护的方式解决您的问题

如果您真的想自己实现它，我建议您使用字符串而不是节点实例，并尽量减少DOM操作（

appendChild

或

some_Node.innerHTML='…

），因为这是浏览器最昂贵的操作。您可以复制模板的html，并在创建节点之前将其作为字符串进行操作

例如：

let result\u block=document.getElementById（“result\u block”）
让result\u group\u template=document.getElementById（“result\u group\u template”）.innerHTML
让新的_结果=[]
for（设i=0；i

我建议将您的代码作为一个片段直接放到问题中，而不是放在JSFIDLE中。跟踪问题的位置非常困难。你能发布一篇文章来减少代码吗？我已经提供了我能提供的最低代码。我试着解决了这个问题，这就是结果。谢谢你的反馈！简明易懂。使用可重用模板也是我的第一个想法。我认为这是最好的途径。我只是没有弄清楚如何实现它，然后才转向这个解决方案。我正在使用Django，起初我想尝试使用Django include模板呈现。这个应用程序太小了，我用它来学习，我确实想自己实现它，而不是使用另一个库。Hugo你能告诉我正确的方向来阅读{{${field{u name}}}}我从未见过它。命名法是什么？我看到它替换了模板中的html。它看起来像Django模板语言。Django使用{{}作为其python模板语言。我必须弄清楚如何使用威瑟尔在django端或JS端指定的其他东西。它实际上只是易读性的一个占位符。这是一个很好的解决问题的方法。在我结束之前，我是否应该将实际问题改为类似的问题。如何使用Javascript重用模板HTML？我很高兴这有帮助。是的，我认为你应该在问题中提到可重用模板，以供将来参考

let result_block = document.getElementById("result_block")
let result_group_template = document.getElementById("result_group_template").innerHTML
let new_results = []
for ( let i = 0; i < member_list.length; i++ ) {
    let this_result = result_group_template
    for( let field_name in member_list[i].fields ){
        this_result = this_result.replace( field_name, member_list[i].fields[field_name] )
    }
    new_results.push( this_result )
}
result_block.innerHTML = new_results.join("")