在使用append(）后，美化html输出

Prettify html output after using append()

本文关键字：美化 html 输出 append      更新时间：2024-06-03

我有以下代码：

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

我知道这是一个小"问题"，但JSON有大约200个对象，这让除我之外的其他人更难调试。有没有办法将html代码附加到元素对象中，以保持所需的结构？

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

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

相关文章：