无法显示Bootstrap关闭按钮

Question

I have a close (x) button in bootstrap that I can't get to show using javascript. As soon as I give it the class name close it disappears. What gives?

var btn = document.createElement("button");  //<button> element
btn.className("close");  <!-- unless commented out it won't show -->
var t = document.createTextNode("x"); <!-- would rather use &times; but this will work for now  -->
btn.setAttribute("class", "close");  <!-- tried this and didn't work either -->  
cell4.appendChild(btn);

for reference I'm trying to apply this class to it from bootstrap

button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}

Answer 1

Your css class close is clashing with the bootstrap close class.

Try renaming your css class to something else to see if the problem goes away.

If you still want to keep on using this css class name, you will then to override (or reset) the properties that bootstrap close css class implements.

Answer 2

So apparently when you create a button element in javascript it does not explicitly set the type to button , you have to add that in yourself. adding in the line

btn.setAttribute("type", "button");

show the correct css for the button.