Hide attribute of an element from DOM

Question

As the title says, I would like to add a new hidden attribute to an element. To avoid any confusion, I want the attribute to be hidden, not the element.

I have a div: <div id="hello_div">Hello!</div>

I add an attribute: $('#hello_div').attr('my_attr', 'attr_value');

So I can get it later: var v = $('#hello_div').attr('my_attr');

It works as expected but if you inspect the div in the DOM Explorer, you see:

<div id="hello_div" my_attr="attr_value">Hello!</div>

Is there any way to hide this attribute?

Answer 1

You can't hide DOM-attributes, but as I see you are using jQuery, you could try data . Eg

$('#hello_div').data('my_attr', 'attr_value');

and later retrieve:

var v = $('#hello_div').data('my_attr');

Answer 2

When you get back your required attribute var v = $('#hello_div').attr('my_attr');

remove the attribute after this $('#hello_div').removeAttr('my_attr');

Answer 3

否。如果您通过添加属性来操作DOM，则在使用Chrome开发人员工具等DOM检查器时，该属性将始终可见。