Creating an anchor with attribute called offset

Question

I'm having a very strange behavior when dynamically creating an anchor with the following code:

var newAnchor = $('<a>', {
                    'href': '#',
                    'class': 'seeMoreFromSection load-multi',
                    'offset':'12',
                    'type': '15',
                    'sec': '4'
                }).html('See more');

$('a.seeMoreFromSection').replaceWith(newAnchor);

The problem is in the attribute that is called offset, it's resulting in the following error: Cannot use 'in' operator to search for 'using' in 12. When I remove the line 'offset':'12' everything works fine. I made it work by adding this attribute after creating the anchor:

$('a.seeMoreFromSection').attr('offset', '12');

But I still don't understand what is the problem, is it some sort of a reserved word or something?

UPDATE: the browser Google Chrome 33.0.1750.154 m

Answer 1

As it can be seen in the documentation, you can use valid HTML attributes, valid event types and some jQuery methods (offset() being one of them):

If the second argument is passed, the HTML string in the first argument must represent a a simple element with no attributes. As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.

offset, type and sec would not be valid HTML attributes anyways, so you cannot expect your tools to accept them. You can use data- attributes to make your special attributes valid, or you can use the data() method of jQuery, unless you specifically need to store data in HTML attributes (which is not the case most of the time).