Add custom attribute to HTML tags

Question

I am adding custom attributes to my HTMLtags something like

<li customeId="1">

I am to access this custom attribute in IE but in firefox, I am not able to get the values of these attributes. Any suggestion on how to access custom attribute in FireFox or any other way. I am using HTML 4 for development.

Code to access:

  var test =  licollection[index].customeId;

Thanks Ashwani

How are you trying to access the attribute? Add the code, so we can see what you are doing. — Oded
– Oded, Commented May 13, 2010 at 6:13
You aren't using HTML 4. You are using tag soup. HTML 4 doesn't support custom attributes. — Quentin
– Quentin, Commented May 13, 2010 at 7:46
@David, then is there any other way to associate some properties with a tag in HTML 4? — Ashwani K
– Ashwani K, Commented May 13, 2010 at 8:39
Existing attributes. A script element containing some data (e.g. `var foo = { element_id: [1,2,3], other_element: [4,5,6] };). Text content. — Quentin
– Quentin, Commented May 13, 2010 at 8:45

Caleb · Accepted Answer · 2012-11-26 22:49:52Z

18

Hopefully below code will be helpful for you.

<div id="navigation">
 <ul>
  <li customerId="1"></li>
  <li customerId="2"></li>
  <li customerId="3"></li>
 </ul>
</div>

var x = document.getElementById('navigation');
if (!x) return;
var liCollections = x.getElementsByTagName('li');
for (var i=0;i<liCollections.length;i++)
   alert(liCollections[i].getAttribute('customerid', 0));

It's clear enough, and you can understand it easily.

edited Nov 26, 2012 at 22:49

Caleb

1,47615 silver badges20 bronze badges

answered May 13, 2010 at 8:00

MUS

1,4504 gold badges17 silver badges30 bronze badges

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

Comments

Gaurav · Accepted Answer · 2012-05-10 05:33:51Z

8

You can use HTML 5 custom data attribute functionality, it may helps you

Attribute Name

The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.

Attribute Value

The attribute value can be any string.

Example :-

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

answered May 10, 2012 at 5:33

Gaurav

8,49714 gold badges57 silver badges91 bronze badges

1 Comment

Pablo Contreras Over a year ago

this is great info. just a couple questions, > what will happen if the code runs on an old browser? (no HTML5 compatibility) > is there a limit to 'data-<attrib>' tags >

vsync · Accepted Answer · 2010-05-13 07:50:23Z

2

test.getAttribute('customerid');

Did you try this?

answered May 13, 2010 at 7:50

vsync

133k59 gold badges344 silver badges430 bronze badges

Comments

kennytm · Accepted Answer · 2010-05-13 07:45:31Z

0

Try

var test = licollection[index].getAttribute("customeId");

answered May 13, 2010 at 7:45

kennytm

526k110 gold badges1.1k silver badges1k bronze badges

Comments

mangokun · Accepted Answer · 2010-05-13 08:14:45Z

0

licollection[index].getAttribute("customeId")

reference: http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/getAttributeSyntaxParametersandNote.htm

answered May 13, 2010 at 8:14

mangokun

5,6532 gold badges17 silver badges8 bronze badges

Collectives™ on Stack Overflow

Add custom attribute to HTML tags

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Linked

Related