Question

I create a plugin, and I like to have some extra attributes in my HTML elements. I know that if I create my own custom attributes the HTML document will not valid, but this is not the problem. I just wondering, in that case it will be posible to access that atributes with jQuery ?

ie:

<div id="c" my-custom-attr="myValue" data-my-custom-attr="another-value">
    Content here
</div>

<script type="text/javascript">
    $att1 = $('#c').attr('my-custom-attr');
    $att2 = $('#c').attr('data-my-custom-attr');
</script>

Will create any problem with any browser the above code ? 😕

Answer 1

While no one can say it will work in all browsers; your code should not cause any problems in the major modern browsers. I would suggest using the data-* HTML5 naming convention as you’ve done in your second example.

As a side note; in your second example, you can access the attribute in two ways using jQuery 1.4.3+

<div id="c" data-my-custom-attr="another-value">
    Content here
</div>

<script type="text/javascript">
    // Both produce the same output //
    console.log($('#c').attr('data-my-custom-attr'));
    console.log($('#c').data('my-custom-attr'));
</script>

I hope it helps!