javascript - JS cloneNode() 并更改children的值

Question

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

这是JSfiddle 。

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

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

我想知道是否有更好的方法。在数据集扩展至超过这 3 项的情况下，这是一种更易于读取/维护的方法。如果它确实扩展，则必须有人返回并更改列表和变量(prop_list)

这是有人建议的 JS 和 HTML:

member_list = [{
      "model": "members.rider",
      "pk": 1,
      "fields": {
        "firstName": "Shane",
        "lastName": "Cheek",
        "phoneNumber": "222-222-2222",
        "email": "Shane@email.com",
        "active": true
      }
    }, {
      "model": "members.rider",
      "pk": 2,
      "fields": {
        "firstName": "Other",
        "lastName": "Rider",
        "phoneNumber": "333-333-3333",
        "email": "Other@email.com",
        "active": false
      }
    }]
    
    
    
    for (let i in member_list) {
      let name = member_list[i].fields.firstName + " " + member_list[i].fields.lastName;
      let phoneNumber = member_list[i].fields.phoneNumber;
      let email = member_list[i].fields.email;
    
    	let prop_list = [name, phoneNumber, email]
    
      let result_block = document.querySelector("#result_block");
      let result_group = document.querySelector("#result_group");
      let member_data = document.querySelector("#member_data_left");
    
    
      let cloned_result_group = result_group.cloneNode(true);
      result_block.appendChild(cloned_result_group);
      cloned_result_group.style.display = ""
      
      let cloned_member_data = cloned_result_group.querySelector("#member_data_left")
    	cloned_member_data.innerHTML=""
        for (let p in prop_list) {
          let para = document.createElement("p")
          let text = document.createTextNode(prop_list[p])
          para.appendChild(text)
          cloned_member_data.appendChild(para)
        }
      }

  
      <div class="result_block ref" id="result_block">
        <div class="result_group ref " id="result_group" style="display: none">
          <div class="member_data_left" id="member_data_left">
            <p id="first_last_name">name</p>
            <p id="phone">phone number</p>
            <p id="email">email</p>
          </div>
        </div>
      </div>

Answer 1

您确实应该检查一下模板库，例如 handlebars.js 。它们旨在以最有效和可维护的方式解决您遇到的具体问题。

如果您确实想自己实现它，我建议您使用字符串而不是 Node 实例，并尽量减少 DOM 操作(appendChild 或 some_node.innerHTML = '... ')，因为这是浏览器最昂贵的操作。您可以复制模板的 html，并在创建节点之前将其作为字符串进行操作。

例如:

https://jsfiddle.net/6bmjyneq/

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("")