迭代一个JSON对象并将Child附加到DIV

Question

我有一个JSON对象，例如：

{ Naam: "bert", Achternaam: "Kopers"}

我想将其呈现为HTML页面上的DIV元素。它应该是这样的：

<div id = "contents>
<div class="setting-label">
Naam
</div>
<div class="setting-value">
bert    
</div>
</div>
<div class="setting-row">
<div class="setting-label">
AchterNaam
</div>
<div class="setting-value">
kopers  
</div>
</div>

最好我希望这没有innerHTML。appendChild也是如此。代码看起来怎么样？

Answer 1

这应该有效：

onload = function() {
var person = {Naam: "Bert", Achternaam: "Kopers"};
var contents = document.getElementById("contents");
for(var key in person) {
var personDiv = document.createElement("div");

var div1 = document.createElement("div");
var text1 = document.createTextNode(key);
div1.appendChild(text1);

var div2 = document.createElement("div");
var text2 = document.createTextNode(person[key]);
div2.appendChild(text2);

personDiv.appendChild(div1);
personDiv.appendChild(div2);

contents.appendChild(personDiv);
}
}

<div id="contents"></div>

会给你一个HTML输出：

<div id="contents">
<div>
<div>Naam</div>
<div>Bert</div>
</div>
<div>
<div>Achternaam</div>
<div>Kopers</div>
</div>
</div>