Javascript 在读取JSON文件后，如何操作HTML？ window.alert=函数（）{}； var defaultCSS=document.getElementById（'bootstrap-css'）； 函数更改css（css）{ if（css）$（'head>link'）。过滤器（':first'）。替换为（''； else$（'head>link'）.filter（':first'）.replaceWith（defaultCSS）； } $（文档）.ready（函数（）{ $.getJSON（“./data/data.json”，函数（json）{ console.log（json.length）；//这将在firebug控制台中显示它的信息 }); });

我知道json是我的json对象。我想用它来操纵我的html

如果它是我的JSON对象中的第一项，那么

<script type="text/javascript">
    window.alert = function(){};
    var defaultCSS = document.getElementById('bootstrap-css');
    function changeCSS(css){
        if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
        else $('head > link').filter(':first').replaceWith(defaultCSS); 
    }
    $( document ).ready(function() {
      $.getJSON("./data/data.json", function(json) {
        console.log(json.length); // this will show the info it in firebug console
      });
    });
</script>

json[0]。引用

json[0]。个人

---

我想重复上面的代码n次，有很多方法可以做到这一点，但最简单的方法可能是构建一个字符串并将其附加到您希望它驻留的任何容器中

      <div class="item active"> <!-- active only appears if it's the first item -->
        <blockquote>
          <div class="row">
            <div class="col-sm-3 text-center">
              <img class="img-circle" src="json[0].image" style="width: 100px;height:100px;">
            </div>
            <div class="col-sm-9">
              <p>json[0].quote</p>
              <small>json[0].person</small>
            </div>
          </div>
        </blockquote>
      </div>

$.getJSON（“./data/data.json”），函数（json）{
$.each（json、函数（数据）{
var html=''+data.quote+'
'+
''+data.person+''；
$（'#MySuperSpecialDiv'）.append（html）；
});
});

请注意，这不会很好地扩展。如果你要添加比你已经拥有的标记更多的标记，你应该真正考虑某种模板选择。

---

另外，如果有人在你后面维护这个项目，你可能不会是他们最喜欢的人。

你考虑过像或这样的javascript模板库吗？使用类似

$的循环。每个（json，function（））

处理json并将其添加到DOM。javascript不是我的强大套件。你能举个例子吗。这个例子甚至不必为我解决这个问题。我只想再问一个问题。这段代码实际驻留在哪里？在最佳实践中的脚本标签是把它写在一个外部的JS文件中，它是在关闭正文标签之前请求的。谢谢，但是如果我这样做，我将如何把我的HTML插入到页面的中间。我的div标签需要在它之间，它是结束标签。如果我把它附加到文件的末尾，那么它会把我的HTML布局弄得乱七八糟。de>$（'body'）.append（html）；就是一个例子。将一个具有唯一id的div放置在希望添加新html的位置，并替换该div的id。

$（'MySuperSpecialDiv'）.append（html）；

$.getJSON("./data/data.json", function(json) {
  $.each(json, function(data) {
    var html = '<p>' + data.quote + '</p>' +
               '<small>' + data.person + '</small>';

    $('#MySuperSpecialDiv').append(html);
  });
});