如何將Json數據插入HTML Div？

Question

這是我的json文件“ contact.json”

[
   {
      "name":"Alice",
      "surname":"Smith"
   },
   {
     "name":"Bob",
      "surname":"Walter"
   }
]

我想要達到的目的是使用javascript（+ jquery）讀取此文件，並填充html div（基於聯系人數量），然后在div中放置名稱和姓氏。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <meta name="description" content="Test">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="people.json"></script>
    </head>
    <body>

     <section id="contacs">
       <div class="grid-3">               
            <div class="box">
                   <h3 class="name"></h3>
                   <h3 class="surnamename"></h3>                         
             </div>                               
       </div>
     </section>  
  </body>
</html>

這是我到目前為止所寫的內容；

load();

function load(){

var name=document.querySelector(".name");
var surname=document.querySelector(".surname");

    $.getJSON("contact.json", function (data) {
    $.each(data, function (index, value) {
       console.log(value);
       name.innerHTML= value.name;
       surname.innerHTML= value.surname;


    });
});

這樣我就可以讓聯系人在控制台中將其寫入，而無論如何我都無法將其傳遞到innerHTML中，並且不知道如何填充稱為“ box”的HTML div。

Answer 1

您必須以以下方式通過js創建元素：

document.createElement('div')
document.createElement('h3')

要在那里更改文本，請使用

block.innerHTML = "Put your code here"

並用其他塊填充

block.appendChild(otherBlock)

這是一個小例子，希望對您有所幫助： https : //codepen.io/anon/pen/jQGBdm

Answer 2

一種可能的解決方法：

var myDiv = document.createElement("div");   
myDiv.innerHTML = "<h3>" + value.name + "</h3> \
               <h3>" + value.surname + "</h3>"   

document.body.appendChild(myDiv);

更新：（最佳實踐）

var markup = `
<div class="box">
       <h3 class="name">${value.name}</h3>
       <h3 class="surname">${value.surname}</h3>                         
 </div>
`;

document.body.innerHTML = markup;

Answer 3

將ID賦予父div說容器，創建動態h3元素並將其附加到父div

HTML：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <meta name="description" content="Test">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="people.json"></script>
    </head>
    <body>

     <section id="contacs">
       <div class="grid-3" id="container">               
            <div class="box">
                   <h3 class="name"></h3>
                   <h3 class="surnamename"></h3>                         
             </div>                               
       </div>
     </section>  
  </body>
</html>

jQuery的：

var data = [
   {
      "name":"Alice",
      "surname":"Smith"
   },
   {
     "name":"Bob",
      "surname":"Walter"
   }
];

load();

function load(){

var name=document.querySelector(".name");
var surname=document.querySelector(".surname");

    $.each(data, function (index, value) {
        var parent = document.createElement('div');
      parent.className = 'box';
      var $name = $('<h3 class="name">').text(value.name);
      var $surname = $('<h3 class="surname">').text(value.surname);
      $name.appendTo(parent);
      $surname.appendTo(parent);
      $(parent).appendTo($('#container'));
    });
}

的jsfiddle

如何將Json數據插入HTML Div？

問題描述

3 個解決方案

解決方案1
0 2018-11-20 22:55:45

解決方案2
0 2018-11-20 23:02:37

解決方案3
0 2018-11-22 05:47:43

如何將Json數據插入HTML Div？

問題描述

3 個解決方案

解決方案1 0 2018-11-20 22:55:45

解決方案2 0 2018-11-20 23:02:37

解決方案3 0 2018-11-22 05:47:43

解決方案1
0 2018-11-20 22:55:45

解決方案2
0 2018-11-20 23:02:37

解決方案3
0 2018-11-22 05:47:43