从对象动态创建元素

debugcn 发表于 Dev

莫顿·哈格

我有一个看起来像这样的对象

var nodes = [{
                'name': 'Test1',
                'address': 'Street 1',
                'zipcode': '1234',
                'city': 'Big City',
                'phone': '12345678',
                'email': '[email protected]',
                'web': 'www.test.com'
            },
            {
                'name': 'Test12',
                'address': 'Street 5',
                'zipcode': '5678',
                'city': 'Bigger City',
                'phone': '89898989',
                'email': '[email protected]',
                'web': 'www.test2.com'
            }
        ]

我想要的是遍历这个对象并从值动态创建一个带有 textNode 的 span 元素，并使用类的键

var elm = document.createElement('span')
elm.appendChild(document.createTextNode(THEVALUE))
elm.setAttribute('class', THEKEY)
li.appendChild(elm)

目前我正在使用基本的 for 循环，但我不确定仅提取密钥的最佳方法

for (var i = 0; i < nodes.length; i++) {
   var elm = document.createElement('span')
   elm.appendChild(document.createTextNode(nodes[i]))
   li.appendChild(elm)
}

预期的结果是

<span class="name">Test1</span>
<span class="address">Street 1</span>

我正在使用香草 JS

某些表演

您可以迭代使用Object.entries以同时获取键和值。当一个元素的唯一子节点将是一个文本节点时，分配给它textContent比显式创建一个文本节点更简单并且可能更好：

var nodes = [{
  'name': 'Test1',
  'address': 'Street 1',
  'zipcode': '1234',
  'city': 'Big City',
  'phone': '12345678',
  'email': '[email protected]',
  'web': 'www.test.com'
  },
  {
  'name': 'Test12',
  'address': 'Street 5',
  'zipcode': '5678',
  'city': 'Bigger City',
  'phone': '89898989',
  'email': '[email protected]',
  'web': 'www.test2.com'
  }
]
const ul = document.querySelector('ul');
nodes.forEach(node => {
  const li = ul.appendChild(document.createElement('li'));
  for (const [key, val] of Object.entries(node)) {
    const span = document.createElement('span');
    span.className = key;
    span.textContent = val;
    li.appendChild(span);
  }
});
console.log(ul.innerHTML);