Prettify html output after using append()

I have the following code:

$.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>\
    ');
  });
});

Although it does what it has to do, the output of the HTML is messed up. Something like:

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

I know that it is a minor "problem", but the JSON has about 200 objects and it makes things more difficult to debug for someone other than me. Is there any way to append html code to element object keeping the desired structure?