Search code examples
javascriptinternet-explorer

Code with classList does not work in IE?


I'm using the following code, but having it fail in IE. The message is:

Unable to get value of the property 'add': object is null or undefined"

I assume this is just an IE support issue. How would you make the following code work in IE?

Any ideas?

var img = new Image();
img.src = '/image/file.png';
img.title = 'this is a title';
img.classList.add("profilePic");
var div = document.createElement("div");
div.classList.add("picWindow");
div.appendChild(img);
content.appendChild(div);

Solution

  • The classList property is not supported by IE9 and lower. IE10+ supports it though.
    Use className += " .." instead. Note: Do not omit the space: class names should be added in a white-space separated list.

    var img = new Image();
    img.src = '/image/file.png';
    img.title = 'this is a title';
    img.className += " profilePic"; // Add profilePic class to the image
    
    var div = document.createElement("div");
    div.className += " picWindow";  // Add picWindow class to the div
    div.appendChild(img);
    content.appendChild(div);