Need help removing li bullets in Javascript

Question

I am creating a ul in Javascript and despite my efforts I cannot seem to remove the bullets from the list items. I have the following javascript:

var btnUL = document.createElement("ul");
btnUL.id = "btnUL";
btnUL.style.listStyleType = "none";
document.getElementById("leftGutter").appendChild(btnUL);
document.getElementById("btnUL").style.listStyle = "none";

and I have tried to add css for #btnUL on my style sheet for the list-Style-Type with no luck. What am I doing wrong here?? I placed both attempts at changing the style type in the javascript to demonstrate that I have tried those approaches. I have tried them both separately as well.

Answer 1

There can only be 1 reason why your list still has bullets. And that is a css rule using !important to force a list-style-type. That also explains why you couldn't remove the bullets by using a css rule.

First fiddle is the same code which you are already using. And it works fine. http://jsfiddle.net/5gLwbdvr/

Second fiddle has a certain css rule to force the bullets:

ul { list-style-type:disc !important }

http://jsfiddle.net/5gLwbdvr/1/

If that is not the reason then there must be a problem in the way you are populating the list.

//Edit: After seeing how you populate the list:

You need to append the list items to the list and not to the container.

document.getElementById("btnUL").appendChild(document.createElement("li"));