IE 9 getAttribute method working

Question

I am setting a custom attribute named (say) titleDiv by using setAttribute method

HTML code : <div id="Object" titleDiv="blank"></div>

Javascript code :

var Object=document.getElementById('Object'); Object.setAttribute("titleDiv","myDiv");

Which works fine in all the browser other than IE 9. Same thing happens for getAttribute also.

I have extensive use custom attributes like above in my code and I am not supposed to change the structure.

Is there any alternative way to write above code so that IE will understand it?

Thanks.

What makes you think IE9 isn't doing that? Works for me, provided you use an actual DOM element and not literally `Object`: http://jsbin.com/ujadaj/1 ([source](http://jsbin.com/ujadaj/1)). — T.J. Crowder, Apr 29 '13 at 09:30
This? http://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript — Billy Moat, Apr 29 '13 at 09:33
@BillyMoat: That's *specifically* the `class` attribute, which IE8 and earlier had real issues with, but fortunately it's reflected via a property called `className`. — T.J. Crowder, Apr 29 '13 at 09:36
get/setAttribute has been broken in IE for ages. Using non-standard attributes is also not a good idea (since you can reliably read and set standard properties using dot notation) which is why the *class* and *data–* attributes exist. But I guess you have no choice in this case. — RobG, Apr 29 '13 at 09:39

T.J. Crowder · Accepted Answer · 2013-04-29T09:48:21.383

Updated Answer based on question edit:

You're using an identifier you really should stay away from: Object. I would recommend changing both the id and the name of the variable you use. So:

<div id="theObject" titleDiv="blank"></div>

and

var theObject=document.getElementById('theObject');
theObject.setAttribute("titleDiv","myDiv");

Object is a built-in function in JavaScript. Since the id of elements gets dumped into the global namespace, I would avoid using any of the built-in JavaScript functions (Object, Function, Date, etc.) as id values. For similar reasons, not least just so you're not confusing yourself and others, I would stay away from them as variable names.

That said, I couldn't replicate the problem (source), so although I would still change the id and variable name, that may not be the problem. See also below.

Original Answer:

You call setAttribute on the DOM element instance. You don't do it via the built-in Object function.

If you use a DOM element, it works (even on IE9):

(function() {
  // Get an actual DOM element
  var target = document.getElementById("target");

  // Set the attribute
  target.setAttribute("titleDiv","myDiv");

  // Show the result
  display("Result: " + target.getAttribute("titleDiv"));

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

Live Example | source

If you use the F12 developer tools and go to the HTML tab, you can see that the div does actually get the attribute. (Be sure to use dev tools, not "view source" -- "view source" will show you the HTML that was sent from the server, not the current state of the DOM.)

Side note: Using nonstandard attributes that don't use the data- prefix is a bad idea. You might want to feed that information up the chain to whoever is dictating this. But that's almost certainly not the problem you're having.

Actually my problem is that I am writing a simple drag drop application and at the drag end I call a function with id of the dragged item which is a simple string. When I alert that id on IE it shows me function itemId() { [native code] }. What is this? — user1079065, Apr 29 '13 at 09:44
@user1079065: I'm not following you. What does that have to do with the question / answer? — T.J. Crowder, Apr 29 '13 at 09:45
I thought that IE is not getting getAttribute but problem is different . It understands getAttribute it is not getting the string which I am passing as attrib to my drag end function — user1079065, Apr 29 '13 at 09:46
@user1079065: I just saw the question edit. I've edited the answer. — T.J. Crowder, Apr 29 '13 at 09:48
+1 for non–standard attribute advice. For the OP, so you have something to argue with: HTML5 introduced 18 new attributes for input elements, so you can't be sure that current non–standard attributes won't be in some future version of HTML. A particular browser might also introduce its own new attributes (that's how the web moves forward) in the hope they will become standardised in future. The golden rule is *do not modify objects you don't own* (host, built-in or native objects from someone else's code) and use only the API, properties and attributes you are provided. — RobG, Apr 29 '13 at 10:01
@user1079065: IE **does** understand `getAttribute` and `setAttribute`, as I showed in my examples. Those work on IE9. IE does have several problems with those functions (mostly in IE8 and earlier), but on this. (On other things, like the `class` attribute.) — T.J. Crowder, Apr 29 '13 at 10:34

IE 9 getAttribute method working

1 Answers1