Can I store custom attributes in HTML DOM like a database record?

Question

When developing for browsers FF3 and IE6/7 with jQuery, are there any compatibility issues when setting custom attributes on HTML tags?

First, I\'m aware of jQuery\'s

Answer 1

Absent some standard way to do this in HTML4, I would be tempted to create a hidden element that corresponds to my draggable and store the associated data in it. Name the hidden element relative to the draggable so that you can easily lookup the information for it. The following extension implements this using a hidden span. Note: in testing it I couldn't replicate your issues with draggable items -- data() seemed to work fine for me, but I didn't test it with various plugins, just UI.Draggable.

Usage:

$('#draggableDiv').externalData('key','data');
var d = $('#draggableDiv').externalData('key');

jQuery.fn.externalData = function(key, data) {
    var value = this;
    this.each( function() {
        var id = this.id+'_external_data';
        var elem = jQuery('#'+id+':first');
        if (elem.size() == 0) {
            elem = $('"' );
            elem.appendTo(document.body);
        }
        if (data) {
            elem.data(key,data);
        }
        else {
            value = elem.data(key);
            return false;
        }
    });
    return value;
};