ansaurus

Question

User Definable Attributes on HTML Elements?

Answer 1

+4 A:

You can't add arbitrary elements to HTML. Well you can but it won't be valid and beheaviour is undefined. For this kind of thing I tend to use jQuery. It has a data() call that can add arbitrary data to an element. I believe it encodes it in the class attribute but the implementation is not important.

You could do this yourself but why bother? It's easy to get wrong by putting the wrong characters in, not correctly escaping/unescaping data or inadvertently destroying informatino. Instead just do:

$("#item1").data({source: "Thsi is element 1 from XYZ"});

cletus 2010-01-08 01:43:03

Answer 2

+12 A:

You can access your userdata="" attribute from JavaScript. Just do:

var theData = document.getElementById('item1').getAttribute('userdata');

If you want to do it the HTML5 way, then you would use attributes named data-*, e.g.:

<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>

that way it will still be valid (i.e., it'll make you feel better for not using an invalid attribute). New browsers will support accessing the data-* attributes like so:

var theData = document.getElementById('item1').data.foo;

but I don't think that is implemented widely enough to rely upon yet.

If you do want to store the data in a comment (although I'd advise going the attribute route instead) you could do something like:

var e = document.getElementById('item1');
var n = e.firstChild;
while (n && n.nodeType != Node.COMMENT_NODE) {
    n = n.nextSibling;
}
// now n.nodeValue will have the comment contents

(No guarantees about whether IE likes any of the above.)

heycam 2010-01-08 01:44:25

+1 For mentioning the *valid* HTML5 data attributes. Great answer!

Doug Neiner 2010-01-08 01:47:11

+1 too for HTML5

Anurag 2010-01-08 01:48:03

Wow - what an excellent answer, plus the HTML5 mention is very useful. Thanks very much!

OneNerd 2010-01-08 01:53:32

How widely implemented is setUserData?

Dominic Cooney 2010-02-11 00:05:11

Dominic, of the major five browsers, it seems only Firefox supports it.

heycam 2010-02-13 01:41:49

Answer 3

A:

If you don't need the HTML to be valid, you can make any attribute you want, and you can access it in Javascript by calling the getAttribute method.

SLaks 2010-01-08 01:44:37

Answer 4

A:

You can add a nested invisible element with an id and your data as the innerText. Use the style attribute to make sure it's invisible.

But it all really depends on what you're trying to achieve. Could you elaborate more?

Assaf Lavie 2010-01-08 01:47:51

Answer 5

+1 A:

Since you can accept adding comments, a better solution would be to add a span element with the content you wanted..

<span class="data">.....</span>

you define your data class to have display:none and it is invisible ...

this way you can have access to it with the normal DOM traversing methods..

Gaby 2010-01-08 01:59:08

Answer 6

A:

You can use setUserData() and getUserData() function http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData

For example:

<html>
<head>
    <script type="text/javascript">
        function set(){
            var a = document.getElementById("testElement");
            a.setUserData("testData", "Some text", null);
        }

        function get(){
            var a = document.getElementById("testElement");
            alert(a.getUserData("testData"));
        }
    </script>
</head>
<body>
    <span id="testElement"/>
    <form>
        <input type="button" value="setUserData" onclick="set()"/>
        <input type="button" value="getUserData" onclick="get()"/>
    </form>
</body>

hvtuananh 2010-01-08 02:27:14

Answer 7

A:

// If you want to include data in the html why not give it its own node?

.hiddendata{
 display: none
}

<li id= 'item1'> 
Item 1
<span class= "hiddendata"> This is element 1 from XYZ</span> 
</li> 

function readHiddenData(who){
 var A= [], n= who.firstChild;
 while(n){
  if(n.className= 'hiddendata'){
   A[A.length]= n.textContent || n.innerText || '';
  }
  n= n.nextSibling;
 }
 return A;
}

function showHiddenData(who){
 var n= who.firstChild;
 while(n){
  if(n.className= 'hiddendata'){
   n.style.display= "inline"
  }
  n= n.nextSibling;
 }
}

kennebec 2010-01-08 04:09:37

Answer 8

A:

http://stackoverflow.com/questions/427262/can-i-just-make-up-attributes-on-my-html-tags/431101#431101

Ms2ger 2010-01-08 13:28:07

ansaurus

tags:

views:

answers:

User Definable Attributes on HTML Elements?

related questions