title: Disadvantage of setting html through jquery html()
body: <p>is there any disadvantage on setting html of say for example the content of a div through jqyuery's <code>html()</code> function?</p>
  
  <p>Because I have a static content inside a <code>div</code>, it is a progress bar which is made by <code>&lt;li&gt;</code>. Now, it displays perfectly fine, each bar has its gap with each other, with a click of a button its contents will be change but all same code, but now it doesnt displays like before. It displays as a continuous line, no more gaps between <code>&lt;li&gt;</code>.</p>
  
  <p>Any idea?</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="branch-status-bar-container"&gt;
    &lt;ol class="branch-status-bar" data-branch-status-bar-steps="8" &gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
      &lt;li class="branch-status-bar-done" id="" &gt; &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#branch-status-bar-container {
      vertical-align: middle;
      padding-bottom: 30px;
  }
  
  .branch-status-bar {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  
  .branch-status-bar li {
      display: inline-block;
      text-align: center;
      line-height: 3em;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="2"] li {
      width: 49%;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="3"] li {
      width: 33%;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="4"] li {
      width: 24%;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="5"] li {
      width: 19%;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="6"] li {
      width: 16%;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="7"] li {
      width: 14%;
  }
  
  .branch-status-bar[branch-data-status-bar-steps="8"] li {
  .branch-status-bar[branch-data-status-bar-steps="9"] li {
      width: 11%;
  }
  
  .branch-status-bar li.branch-status-bar-done {
      color: black;
      border-bottom: 14px solid #0489B1;
      width: 12%;
  }
  
  .branch-status-bar li:after {
      content: "\00a0\00a0";
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
      $('#profit-centers').on('change', function (){
          var profit_center_id = $('#profit-centers').val();
  
          $.ajax({
              url: '/reporting-portal/get-profit-center',
              type: 'POST',
              data: {
                  profit_center_id : profit_center_id
              }, 
              success: function (data) {
                  var json = JSON.parse(data);
                  var html = profit_center.branch(json);
                  $('#profit-center-content').html(html);
              }, 
              error: function () {
  
              }  
          });
      });
  });
  </code></pre>