迭代一个 JSON 对象并将其追加到 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>