Question

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

SELECT Table1.COLUMN_NAME FROM [Database].INFORMATION_SCHEMA.COLUMNS Table1
INNER JOIN [Database].INFORMATION_SCHEMA.COLUMNS Table2 
ON Table1.COLUMN_NAME = Table2.COLUMN_NAME
WHERE Table1.TABLE_NAME = N'Table1' AND Table2.TABLE_NAME = N'Table2'

我想实现的目标是使用javascript（+ jquery）读取此文件，并填充html div（基于联系人数量），然后在div中放置名称和姓氏。

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

这是我到目前为止所写的内容

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

所以我可以让联系人在控制台中将它们写成如何无法将它们传递到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 个答案: