Question

我有以下代码：

$.getJSON('json/sites.json', function(data) {
$.each(data, function(index,element){
    $('#menu').append('\
    <li class="treeview">\
              <a href="#">\
                <i class="fa fa-dashboard"></i> <span>Dashboard 2</span> <i class="fa fa-angle-left pull-right"></i>\
              </a>\
              <ul class="treeview-menu">\
                <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>\
                <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>\
              </ul>\
            </li>\
    ');
  });
});

尽管它做了它必须做的事情，HTML的输出却搞砸了。类似的东西：

<div id="menu" class="sidebar-menu">    <li class="treeview">            
<a href="#">                <i class="fa fa-dashboard"></i>
<span>Europe</span> <i class="fa fa-angle-left pull-right"></i>  
</a>              <ul class="treeview-menu">                <li><a
href="index.html"><i class="fa fa-circle-o"></i> Germany</a></li>
<li class=""><a href="index2.html"><i class="fa fa-circle-o"></i>
Greece</a></li>              </ul>            </li>     <li
class="treeview">              <a href="#">                <i
class="fa fa-dashboard"></i> <span>Dashboard 2</span>
...

我知道这是一个未成年人问题＆＃34;，但是JSON有大约200个对象，这使得为我以外的人调试更加困难。有没有办法将html代码附加到保持所需结构的元素对象？

Answer 1

除了你没有来自该HTML块中的JSON对象的动态数据这一事实，这让我想知道为什么你甚至想要首先用JavaScript注入它，值得注意的是浏览器生成的输出只能使用 Chrome Developer Tools 等进行调试，这使格式完全无关，因为可以使用 DOM浏览器轻松查看代码。

另一方面，如果您必须正确格式化该代码，我建议您使用模拟引擎，例如 mustache.js 或 handlebars.js

使用append（）后整理html输出

1 个答案: