Question

I have a pair of HTMLElement objects that are being passed into a function. One is a container div, and the second is appended to the container. This is working as expected. In order to find the child element later, i give it a unique class for this type of element (there can be more than one). This is also working as expected.
However, when I later go to manipulate the child element, jQuery .find(“.myClass”) fails to return any results. The following code returns 1 in chrome and ie8/9 but 0 in ie7:

$(document).ready(function(){
    var insert = document.createElement("div");
    insert.setAttribute("class","insertedElement");
    insert.appendChild(document.createTextNode("Some Text"));
    $(document.getElementById("container")).append(insert);
    alert($("#container").find(".insertedElement").length);
});

Here it is in a JSFiddle: http://jsfiddle.net/tYfqk/

Any idea what is happening here, or how i can correct it?

Also, please excuse the contrived $(“document.getElementById(“container”)).append(insert); above, this is just to illustrate that my objects come in as DOM elements, not jQuery objects. I am aware $(“#container”).append(insert); would make more sense there, but even if you change that the issue is still present.

Answer 1

Old versions of IE won’t let you set the class by setting the “class” as an attribute. Use the jQuery “addClass” instead.

$(insert).addClass("insertedElement");

Or just set the “className” property:

insert.className = "insertedElement";

(The word “class” is reserved in JavaScript, so the property is “className”.) In general, things like “className”, “id”, “name”, “value”, “type”, “href”, etc on DOM elements can and (I think) should be treated as object properties, not attributes.