javascript - 从对象动态创建元素
问题描述
我有一个看起来像这样的对象
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 循环,但我不确定仅提取密钥的最佳方法
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
解决方案
您应该使用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)
}
}
这是一个工作示例,尽管您想将所有节点附加到同一个列表项似乎有点奇怪。
推荐阅读
- mongodb - Mongo/Jongo 查询日期
- c++ - Eigen c++ 通过偶数行和奇数行将两个矩阵映射到一个新矩阵,而无需复制
- containers - 容器优化系统性能
- azure - Azure 指标警报 - 对应日志
- go - 如何增加(或访问)Go bleve 搜索引擎结果?
- r - 在 dplyr 中创建按条目类型过滤的每月总计数和每月计数
- python - 如何让 Jupyter notebooks 一个接一个的自动化运行?
- python - 有没有办法通过 Python 批量编辑用户权限/与数百个 Google 表格交互?
- python - 条件均值
- spring-boot - 列表的“二传手”