javascript - 从对象动态创建元素

Question

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

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

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

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

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

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

Answer 1

您应该使用 for...in 作为内部循环，这将允许您迭代每个节点的属性:

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

Here is a working example ，尽管您想要将所有节点附加到同一个列表项似乎有点奇怪。