A jQuery code that does not work

#1 
$(document).ready(function(){
	$(".menu-button").click(function(){
		$(".menu-items").toggleClass('display');
	});
	});

	jQuery("ul li").append("<hr/>");

The first 5 lines work I tested them. But the last line :

jQuery("ul li").append("<hr/>");

does not work.

A solution using CSS below works.

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 400%;;
    margin: 10px;
    background: grey;
}

But I had an issue with it, let’s just focus on jQuery now.

So any idea why :

jQuery("ul li").append("<hr/>");

does not work?

Thanks

#2

What exactly doesn’t work?
I created a pen from your description and everything works:

#3

Thanks, but I also tried in CodePen it worked for me however, it still does not work on my localserver. I will keep looking for the issue .

#4

By the look of it seems it’s outside of the document-ready body, perhaps it’s not working since it’s running before the DOM has been loaded?

#5

Excatly what I tried and it worked.

#6