at hover append span one time

Question

this is my html:

  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>
  </ul>

this is my js function:-

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

i want to this type of output:-

<ul>
        <li>Milk</li>
        <li>Bread</li>
        <li class='fade'>Chips</li>
        <li class='fade'>Socks</li>
<span> ***</span>
      </ul>

here i am try to append one span in mouse hover on li.
its work perfect.
but i want to append only one time after last li.
thanks.

Answer 1

I found the example on the jQuery api manual, isn't this what you want?

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

Or you don't want to remove the span when mouse leave, and just want to append one span:

$("li").hover(function () {
  if ($(this).find('span').length == 0) {
    $(this).append($("<span> ***</span>"));
  }
});

Answer 2

Use one:

$("li").one("hover", function () {
   $(this).append($("<span> ***</span>"));
});

http://api.jquery.com/one/