首页 文章

迭代JSON对象并将appendChild迭代到DIV

提问于
浏览 次
0

我有一个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 . 代码如何？

javascript html json dom

1 回答

  • 0

    这应该工作：

    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>
    回复于

相关问题