我正在尝试使用 Javascript 读取示例 json 动态插入一大块 html 代码，但无法这样做答案

【问题标题】：I am trying to insert a chunk of html code dynamically with Javascript reading smaple json, but unable to do so我正在尝试使用 Javascript 读取示例 json 动态插入一大块 html 代码，但无法这样做
【发布时间】：2017-01-13 06:03:46
【问题描述】：

在 stackoverflow 上解决了几个问题，但无法解决错误。目的是在读取 JSON 结构的主文档中修改和添加 html。

未捕获的类型错误：无法读取未定义的属性“appendChild”

更新 1：-

错字已更正，已在代码中标记。
在 head 部分的脚本加载时引入了延迟，这可以确保在脚本开始执行之前加载整个文档。

我在这里尝试读取 JSON，然后循环遍历其内容以添加到我的主 html 文档中。

var json={  
        "fruit":[  
      {  
         "fruitname":"Apple",
         "location":"data/png/apple.png",
         "quantity":"25",
         "price":"2"
      },
      {  
         "fruitname":"Mango",
         "location":"data/png/mango.png",
         "quantity":"35",
         "price":"3"
      }
   ]
};

//var cards = document.getElementsByClassName("content"); -- corrected typo
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
    var cardelement=document.createElement('div');
    cardelement.className = 'card';
//    alert(cardelement);
    cards.appendChild(cardelement);
    var object = document.createElement('div');
    object.className = 'object';
//    alert(object);
    cardelement.appendChild(object);
    var image = document.createElement('img');
    image.setAttribute("src", fruits[i].location);
    object.appendChild(image);
    var objectback = document.createElement('div');
    objectback.className = 'object-back';
    cardelement.appendChild(objectback);
    var backfruit = document.createElement('div');
    backfruit.className = 'back-fruit';
    backfruit.innerHTML = fruits[i].fruitname;
    objectback.appendChild(backfruit);
    var backprice = document.createElement('div');
    backprice.className = 'back-price';
    backprice.innerHTML = fruits[i].price + "$ per unit";
    objectback.appendChild(backprice);
    var backquantity = document.createElement('div');
    backquantity.className = 'back-quantity';
    backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
    objectback.appendChild(backquantity);
    
}

*
{
    margin: 0 0;
    border: none;
    text-align:center
        
}


#header
{
    background-color: #F44336;
    font-family: 'Bungee Shade', cursive;
    font-size: 30px;
    height: 20%
}

#footer
{
    font-family: 'Roboto', sans-serif;
    position: fixed;
    height: 80%;
    width: 100%
}

#content
{
    width: 75%;
    height: 100%;
    border-right: thick solid #F44336;
    float: left;
    text-align: left;
    overflow: scroll
}

#cart
{
    background-color:#3F51B5;
    width: 25%;
    border-bottom: thick dashed #F44336;
    float: right
}

.card
{
    display:inline-block;
    width: 100px;
    height: 100px;
    margin: 40px;
    padding: 20px;
    box-shadow: -1px 9px 20px 4px  #000000;       
    border: 5px solid #F44336;
    border-radius: 26px 26px 26px 26px;
    transition: all .2s ease-in-out
}

.object .object-back
{
    display:block;
    position:static
}

.object-back
{
    display: none
}

.object img
{
    height: 100px;
    width: 100px
}

.back-fruit
{
    font-size: 20px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: thin solid 
}

.back-price
{
    font-size: 12px;
    padding-bottom: 5px
}

.back-quantity
{
    font-size: 10px;
    padding-bottom: 10px
}

.back-pluscart
{
    font-size: 15px;
    background-color: #F44336;
    width: auto
}

.back-pluscart img
{
    height: 30px;
    width: 30px
}

.card:hover 
{
    box-shadow: -1px 9px 46px 11px #000000
}

.card:hover .object
{
    display: none
}

.card:hover .object-back        
{
    display:inline-block;
    opacity: 1
}

<!DOCTYPE html>
<html>
<head>
    <title> The Shopkeeper </title>
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel = "stylesheet" type = "text/css" href = "style/style.css" />
    <script type="text/javascript" src="logic/core.js" defer></script>
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <div id="base">
        
        <div id="header">
            <h1> Fruitkart </h1>    
        </div>
        
        <div id="footer">       
        
            <div id="content">
                
<!--
                <div class="card">
                    <div class="object">
                        <img src="data/png/apple.png" />
                    </div>
                    <div class="object-back">
                        <div class="back-fruit">Apple</div>
                        <div class="back-price">2$ per unit</div>
                        <div class="back-quantity">In Stock 25 pieces </div>
                        <div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
                    </div>
                </div>
 
-->
            </div>
            
            <div id="cart">
                    django
                is a big boy    
            </div>
            
        </div>
    </div>
</body>
</html>

【问题讨论】：

好像你打错了，当你真正需要getElementById时你使用getElementsByClassName
没有名为content的类
那是我的一个糟糕的错字。谢谢大家

标签： javascript appendchild dom-manipulation dynamic-html

【解决方案1】：

为什么内容未定义

您尝试通过 ClassName 获取内容

var cards = document.getElementsByClassName("content")[0];

但是在你的html中找到content：

<div id="content">

请注意，ID 是内容。要么改成class="content"，要么把之前的代码改成document.getElementByID("content");

【讨论】：

【解决方案2】：

两个问题：

没有 content 类的元素。另一方面，有一个具有该 id 的元素。所以你可能想要这样做：
```
document.getElementById("content");
```
脚本运行得太快——运行时元素尚未加载。要么将脚本放在结束 </body> 标记之前，要么将代码放在事件处理程序中，例如
```
window.addEventListener('DOMContentLoaded', function() {
    // your code
});
```

【讨论】：

非常感谢，在修复第一个错误后还有许多其他错误。
你建议使用 '' 吗？
使用defer 也可以。我通常把脚本标签放在结束</body>标签之前。

【解决方案3】：

您正在尝试访问类名为 content 的元素

var cards =document.getElementsByClassName("content")[0]; 并且没有名为 content 的类

你可以像这样修改你的代码，

var cards = document.getElementById("content");

var json={  
        "fruit":[  
      {  
         "fruitname":"Apple",
         "location":"data/png/apple.png",
         "quantity":"25",
         "price":"2"
      },
      {  
         "fruitname":"Mango",
         "location":"data/png/mango.png",
         "quantity":"35",
         "price":"3"
      }
   ]
};

var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
    var cardelement=document.createElement('div');
    cardelement.className = 'card';
//    alert(cardelement);
    cards.appendChild(cardelement);
    var object = document.createElement('div');
    object.className = 'object';
//    alert(object);
    cardelement.appendChild(object);
    var image = document.createElement('img');
    image.setAttribute("src", fruits[i].location);
    object.appendChild(image);
    var objectback = document.createElement('div');
    objectback.className = 'object-back';
    cardelement.appendChild(objectback);
    var backfruit = document.createElement('div');
    backfruit.className = 'back-fruit';
    backfruit.innerHTML = fruits[i].fruitname;
    objectback.appendChild(backfruit);
    var backprice = document.createElement('div');
    backprice.className = 'back-price';
    backprice.innerHTML = fruits[i].price + "$ per unit";
    objectback.appendChild(backprice);
    var backquantity = document.createElement('div');
    backquantity.className = 'back-quantity';
    backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
    objectback.appendChild(backquantity);
    
}

*
{
    margin: 0 0;
    border: none;
    text-align:center
        
}


#header
{
    background-color: #F44336;
    font-family: 'Bungee Shade', cursive;
    font-size: 30px;
    height: 20%
}

#footer
{
    font-family: 'Roboto', sans-serif;
    position: fixed;
    height: 80%;
    width: 100%
}

#content
{
    width: 75%;
    height: 100%;
    border-right: thick solid #F44336;
    float: left;
    text-align: left;
    overflow: scroll
}

#cart
{
    background-color:#3F51B5;
    width: 25%;
    border-bottom: thick dashed #F44336;
    float: right
}

.card
{
    display:inline-block;
    width: 100px;
    height: 100px;
    margin: 40px;
    padding: 20px;
    box-shadow: -1px 9px 20px 4px  #000000;       
    border: 5px solid #F44336;
    border-radius: 26px 26px 26px 26px;
    transition: all .2s ease-in-out
}

.object .object-back
{
    display:block;
    position:static
}

.object-back
{
    display: none
}

.object img
{
    height: 100px;
    width: 100px
}

.back-fruit
{
    font-size: 20px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: thin solid 
}

.back-price
{
    font-size: 12px;
    padding-bottom: 5px
}

.back-quantity
{
    font-size: 10px;
    padding-bottom: 10px
}

.back-pluscart
{
    font-size: 15px;
    background-color: #F44336;
    width: auto
}

.back-pluscart img
{
    height: 30px;
    width: 30px
}

.card:hover 
{
    box-shadow: -1px 9px 46px 11px #000000
}

.card:hover .object
{
    display: none
}

.card:hover .object-back        
{
    display:inline-block;
    opacity: 1
}

<!DOCTYPE html>
<html>
<head>
    <title> The Shopkeeper </title>
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel = "stylesheet" type = "text/css" href = "style/style.css" />
    <script type="text/javascript" src="logic/core.js" ></script>
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <div id="base">
        
        <div id="header">
            <h1> Fruitkart </h1>    
        </div>
        
        <div id="footer">       
        
            <div id="content">
                
<!--
                <div class="card">
                    <div class="object">
                        <img src="data/png/apple.png" />
                    </div>
                    <div class="object-back">
                        <div class="back-fruit">Apple</div>
                        <div class="back-price">2$ per unit</div>
                        <div class="back-quantity">In Stock 25 pieces </div>
                        <div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
                    </div>
                </div>
 
-->
            </div>
            
            <div id="cart">
                    django
                is a big boy    
            </div>
            
        </div>
    </div>
</body>
</html>

【讨论】：