Using createAttribute vs. just setting the attribute directly?

Question

In javascript, we can create a new DOM element in the following ways...

By using the createAttribute() + setAttributeNode() dom methods:

var input = document.createElement("input"),
    type = document.createAttribute("type");

type.nodeValue = "text";
input.setAttributeNode(type);
container.appendChild(input);

or by just setting the attributes directly:

var input = document.createElement("input");

input.type = "text";
container.appendChild(input);

The latter can end up being quite lot less code, even when there are only a couple attributes per element.

The question: has anyone run across any drawbacks of the latter method (setting attributes directly)?

I tested this on several browsers (the latest FF, IE, Safari, Opera, old IEs - even IE6 worked) and on a basic test (inserting a text input with type, name, and maxLength attributes) they all passed. Here's the fiddle if anybody needs it.

user652649 · Accepted Answer · 2011-10-06 17:21:26Z

14

document.createAttribute
document.createAttributeNS
element.getAttributeNode
element.getAttributeNodeNS
... and a lot of others

will be deprecated in DOM4, so don't use it, just set with setAttribute("name","value")

http://www.w3.org/TR/dom/#element

someinput.type is different basically is a shortcut for doing

setAttribute("type","text");
getAttribute("text");

hope this helps!

element._some_attribute_ is not available for all attributes, just some:
element.dir
element.lang
element.id
...etc

answered Oct 6, 2011 at 17:21

user652649

Sign up to request clarification or add additional context in comments.

5 Comments

Tim Down Over a year ago

It's not entirely true that using setAttribute() and getAttribute() is always equivalent to using the corresponding property. For example, the value property (which always reflects the current value of an input) exists separately from the value attribute (which represents only the initial value). A more obvious example is the style attribute, which contains a string, versus the style property, which is a CSSStyleDeclaration object with individual properties for each individual style property.

user652649 Over a year ago

where did i say that they're always equivalent? :P

Tim Down Over a year ago

Fair point, you didn't. Not sure what prompted my comment now.

puiu Over a year ago

@TimDown nonetheless, appreciate the indepth distinction

Tim Down Over a year ago

See you in a couple of years for my next comment :)

zzzzBov · Accepted Answer · 2011-10-06 17:11:35Z

3

Apparantly IE 5.5 has issues with using the attribute name (i.e. node[attributeName]). Quirksmode has this well documented.

answered Oct 6, 2011 at 17:11

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Collectives™ on Stack Overflow

Using createAttribute vs. just setting the attribute directly?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related