.attr() vs .data()

by rsmclaug

HTML

<div id="foo" data-foo="bar"></div>


<div id="console-header">Console:</div>
<div id="console-log"></div>

CSS

#console-header
{
    font-weight: bold;
    font-family: monospace;
    margin: 2px;
}
.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};

//See http://stackoverflow.com/questions/7261619/jquery-data-vs-attr

console.log("Markup: &lt;div id='foo' data-foo='bar'&gt;&lt;/div&gt;");
console.log("attr getter: " + $('#foo').attr('data-foo'));
console.log("data getter: " +  $('#foo').data('foo'));

$('#foo').attr('data-foo', 'baz');
console.log('<br/>set foo value to "baz" with <b>attr</b>, changes markup');
console.log("Markup: &lt;div id='foo' data-foo='baz'&gt;&lt;/div&gt;");
console.log("attr getter: " + $('#foo').attr('data-foo'));
console.log("data getter: " + $('#foo').data('foo'));

$('#foo').data('foo', 'bax');
console.log('<br/>set foo value to "bax" with <b>data</b>, it\'s stored in $.cache');
console.log("attr getter: " + $('#foo').attr('data-foo'));
console.log("data getter: " + $('#foo').data('foo'));

$('#foo').data('foo', {'a': 1, 'b': 2});
console.log('<br/>set foo value to an object with <b>data</b> , it\'s stored in $.cache')
console.log("attr getter: " + $('#foo').attr('data-foo'));
console.log("data getter: " + $('#foo').data('foo'));