DOM操作克隆节点和放置值

Question

我试图通过克隆 li 项目来动态创建一个列表，然后动态填充该列表的值。奇怪的是，我只从该列表中的对象中获得了第二项。我尝试检查我编写的代码，但似乎找不到问题？

小提琴：https://jsfiddle.net/qaktdgb2/

<ul>
    <li>{name},{price}</li>
</ul>
    
<script>
function loop(node) {

  value = [{
      name: 'Bananas',
      price: '4'
    },
    {
      name: 'Candy',
      price: '2'
    },
    {
      name: 'Oranges',
      price: '2'
    },
    {
      name: 'Vegetables',
      price: '5'
    }
  ]

  let obj = Object.entries(value);
  let len = Object.entries(value).length;

  for (let k = 0; k < value.length; k++) {

    let object = Object.entries(obj[k][1]);

    for (const property in object) {

      let search = `${object[property]}`;
      let values = Object.entries(search.split(','));


      let textName = values[0][1];
      console.log(textName + ':' + values[1][1]);

      let regex = new RegExp("{\\s*" + textName + "[0-9]*\\s*}", "i");

      if (node.childNodes[k].innerHTML) {
        node.appendChild(node.childNodes[k].cloneNode(true));
        node.childNodes[k].innerHTML = node.childNodes[k].innerHTML.replace(regex, values[1][1]);
      }
    }
  }
}

function nodeParentList() {
  let parentList = [];
  var docElements = document.getElementsByTagName("*")
  for (var i = 0; i < docElements.length; i++) {
    parentList.push(docElements[i]);
  }
  return parentList;
}


var docElements = nodeParentList();
for (var i = 0; i < docElements.length; i++) {
  loop(docElements[i]);
}

</script>

预期：

香蕉

糖果

橙子

蔬菜

Answer 1

你做了一些奇怪的事情，我什至放弃理解。所以我几乎改变了一切。所以：

• 您可以使用

  querySelector

  而不是像 jQuery 中那样使用

  getElementsByTagName

  ，只是为了便于理解。
• nodeParentList 函数没有用，因为您正在创建一个数组，其中包含第二个数组的所有元素。你已经有一个数组了，这一步不是必需的。
• 为什么在这里使用

  RegExp

  ？它又慢又糟糕。最好自己用手分割。
• 为什么使用

  Object.entries

  ？您只需

  .forEach

  穿过数组即可。
• 您不停地使用

  node.childNodes[k]

  。您可以先将其分配给变量。

soooo...我已经为你重写了代码，哈哈，以满足所有这些要求+包含修复

HTML

<ul>
  <li>{name},{price}</li>
</ul>

JavaScript

function loop(node) {
  let values = [{
      name: 'Bananas',
      price: '4'
    },
    {
      name: 'Candy',
      price: '2'
    },
    {
      name: 'Oranges',
      price: '2'
    },
    {
      name: 'Vegetables',
      price: '5'
    }
  ];

  let child = node.children[0];
  let syntax = child.innerHTML;
  values.forEach(obj => {
    console.log(obj, child);

    if (child.innerHTML) {
      child.innerHTML = syntax.replace("{name}", obj.name).replace("{price}", obj.price);
      node.append(child);
      child = child.cloneNode(true);
    }
  });
}

loop(document.querySelector("ul"));