Alternative to (deprecated) value attribute for li elements

Question

I'm currently working on a web application using HTML 5, CSS and JQuery. I have an unordered list (ul) for displaying page links, with each li element containing the page link. This list is created dynamically using jQuery.

What I would like to do is to have the list elements display only the page name in the link, but at the same time retain the full link path. For example, "http://www.foo.com/xyz/contactus" would be displayed as "contactus", but the li element would still "know" the full link path. For this purpose the value attribute of li would have been perfect, since i could set them like this:

var ul = $('<ul/>').attr('id', 'linkList');
for (var i = 0; i < linksOnPage.length; i++)  // linksOnPage is an array with all the links
    {
        var pgName = linksOnPage[i].toString().slice(steps[i].toString().lastIndexOf('/') + 1);

        // Create list element and append content
        var li = $('<li/>').text(pgName);    // Set the text to the page name
        li.attr('value', linksOnPage[i].toString());    // Set the value to the full link

        ul.append(li);
    }

This would create a list like:

<ul>
    <li value="http://www.foo.com/xyz/contactus">contactus</li>
    ...
</ul>

Unfortunately the value attribute of li has been deprecated since HTML 4.01 (anyone know the rationale behind this? Seems pretty useful to me...).

So, I would like some advice on how to proceed. One option is to ignore the deprecation and use the value attribute anyway, since all the major browsers still support it, but I'm not very keen on using a deprecated feature and it just feels wrong.

Any ideas?

Answer 1

Change from:

<li value="http://www.foo.com/xyz/contactus">contactus</li>

To:

<li data-value="http://www.foo.com/xyz/contactus">contactus</li>

data-* pattern is the new HTML5 way of keeping values in DOM elements.

You can get the values in one of the two ways:

$('#li-Id').data('value');
$('#li-Id').attr('data-value');

You can read this blog post of John Resig on those attributes.

jQuery data function

Answer 2

Simply use a data attribute (intro; longer tutorial; spec):

<li data-path="http://www.foo.com/xyz/contactus">contactus</li>

As a plus, jQuery conveniently detects and exposes the values of such attributes through the .data method.