Выполните итерацию объекта JSON и добавьте Child в DIV

Question

У меня есть объект JSON, например:

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

Я хотел бы отобразить это в элемент DIV на моей HTML-странице.Это должно выглядеть так:

   <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>