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.

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.

• javascript
• jquery

4 Answers 4

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>"));
  }
});

Use one:

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

http://api.jquery./one/

Simply check first if the span already exists. Remember that 'hover' can take two functions if you want to remove the span after the mouse leaves. This is the equivalent to mouseover and mouseleave bined.

$("li").hover(
  function () {
    if ($(this).is(':empty')) {
      $(this).append($("<span> ***</span>"));
    }
  });

References: hover, empty, mouseover, mouseleave

Use modern JS!

const lis = document.getElementsByTagName("li");
let span;
for (const li of lis) {
    li.addEventListener("mouseover", function() {
        // Do something cool
        if (!span) {
             span = document.createElement("span");
             span.innerText = " ***";
             li.parentElement.append(span);
        }
    }, {once : true}); // (optional) This will make it fire only once for each li
                       // You could add one "once" listener to just the ul as well
}

Documentation, CanIUse