title: Append only once Jquery
body: <p>Finally, I have my solution but still a little problem.</p>
  
  <p>I have this list</p>
  
  <pre><code>&lt;ul id="tricky_list"&gt; 
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
      &lt;li&gt;Item 4&lt;/li&gt;
      &lt;li&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;​
  </code></pre>
  
  <p>I want to show only first 3 (three) elements and show remaining two on mouseover with this function</p>
  
  <pre><code>var limit = 3;
  var list = $("#tricky_list");
  var more = 0;
  
  function tricky_hide(){
      var morec = 0;
      $("li", list).each(function(index) {
          if (index &gt;= limit) {
              $(this).hide();      
              morec = index - limit + 1;
          }
      });
  
      if (!more) more = morec;
  
      if (more) {
          list.append('&lt;li class="more"&gt;' + more + ' more&lt;/li&gt;');
          return true;
      }
      return true;
  }
  
  
  if (tricky_hide()) {
      list.live("mouseover", function() {
          $("li", list).each(function(index) {
              $(this).show();
          });
          $("li.more", list).hide();
      });
  
      list.live("mouseout", function() {
          tricky_hide();
      });
  }
  </code></pre>
  
  <p>​It works perfectly but I need some clarifications.
  I have this piece of function</p>
  
  <pre><code>if (more) {
              list.append('&lt;li class="more"&gt;' + more + ' more&lt;/li&gt;');
              return true;
          }
  </code></pre>
  
  <p>that appends the <code>&lt;li class="more"&gt;</code> also on mouseout event. If i "mouseover" and "mouseout" on this element infinite times, it write in my html document infinite <code>&lt;li class="more"&gt;</code>.
  How to prevent this? How can I append only once (on page load, i.e.) this element?</p>
  
  <p>Thanks to all!</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/MYM2C/" rel="nofollow">http://jsfiddle.net/MYM2C/</a></p>