How can I apply CSS to elements created with javascript in IE?

Question

I've been trying to create an auto complete function for text boxes wherein the user enters the first few characters and the system shows them a list of entries that begin with the user's given input. These entries are fetched from the database and displayed in the UI through javascript. It all works perfectly except in good ol' Internet Explorer where the style sheet properties don't work on the p elements created by javascript. Could anyone please tell me what I'm doing wrong here? Here is the code I'm using

HTML/JSP

<table>
<tr>
<td nowrap>WO Number</td>

<td style="text-align:left;">
  <html:text property="won" styleClass="epntextBox"  onkeyup="autokom();" styleId="won"/>
  <div id="wondiv"></div>
</td>
</tr>
</table>

Javascript (This is some long code. It works fine though...)

function autokom(){
var number = document.getElementById("won").value;
var url = "Fetch_Won?wonnum="+number;
while(document.getElementById("wondiv").hasChildNodes()){
    document.getElementById("wondiv").removeChild(document.getElementById("wondiv").childNodes[0]);
}
if(number=="" || number==null){
    return false;
}
    if(window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();

        try
        {
            req.open("GET",url,true);
        }
        catch(e)
        {
            alert(e);
        }
        req.onreadystatechange = processfetchWON;           
        req.send(null);
    }
    else if(window.ActiveXObject)
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req)
        {

            req.open("GET", url, true);
            req.onreadystatechange = processfetchWON;               
            req.send(null);
        }
    }
}
function processfetchWON(){
if (req.readyState == 4)
{   
    if (req.status == 200)
    {
        try{   
            var responseXML = req.responseXML;
            var parents = responseXML.getElementsByTagName("won");
            var won;
var wondiv = document.getElementById("wondiv");
var num = 0;

if(parents.length>=15){
num = 15;
}else {num = parents.length;}
            for (var loop = 0; loop < num; loop++)
            {
                won = parents[loop].childNodes[0].nodeValue;
                var p = document.createElement("p");
                p.setAttribute("class", "wonp");
                p.setAttribute("id", won);
                p.onclick = function() { setwon(this.id); };
                p.innerHTML = won;
                wondiv.appendChild(p);
            }

        }catch(e){
            alert("Exception in fetching WON/ SWON numbers");
        }
    }
}
}
function setwon(swon){
document.getElementById("won").value=swon;
while(document.getElementById("wondiv").hasChildNodes()){
    document.getElementById("wondiv").removeChild(document.getElementById("wondiv").childNodes[0]);
}

}

CSS

#wondiv{    /*This part works just fine*/
position: absolute;z-index:2;
}
.wonp{    /*But the following doesn't*/
display:block;
margin:0px;
padding:4px;
border:1px inset #000000;
cursor: pointer;
background: white;
width:123px;
}
.wonp:hover{
background: #cbcbcb;
}

I haven't had any problems with the javascript code but the style sheet not being applied to the dropdown by IE(8 - 11) is driving me nuts! Someone please help. I'm at the end of my wits here. (The same css works fine for elements that haven't been js created)

Answer 1

Change

p.setAttribute("class", "wonp");

to

p.className = "wonp";

Some versions of IE have a bug in that they expect you to use "className" with setAttribute , even though the attribute's name is class , not className . But all versions of IE and other browsers use className for the reflected property name, so the change above will solve the problem.

---

It's rare to actually need to use setAttribute . Virtually all of the attributes you might set (with the obvious exception of data-* attributes) have reflected properties on the element instance that are more useful. class and for (as in, on label elements) have slightly odd names ( className and htmlFor ) because class and for are reserved words in JavaScript and when this was being defined, JavaScript didn't let you use reserved words as property name literals (it does now), but most other reflected properties have the same name as the attribute they reflect:

• element.setAttribute("class", x) => element.className = x

• labelElement.setAttribute("for", x) => labelElement.htmlFor = x

• element.setAttribute("id", x) => element.id = x

• formElement.setAttribute("target", x) => formElement.target = x

• linkElement.setAttribute("rel", x) => linkElement.rel = x

• element.setAttribute("src", x) => element.src = x ( script , img , ...)

Sometimes there are slight differences. For instance, element.getAttribute("href") will give you the actual text of the href attribute, but element.href will give you the resolved version (eg, relative paths expanded to full ones). Similarly, the value property of input elements is only initialized from the "value" attribute, after which it takes on a life of its own (usually, but not always, reflected as defaultValue ).