Is there an html tag that does not affect the html document?

Question

Is there a tag in html to which I can add an id attribute that does not affect the html page, but can still be accessed using the jQuery selector?

Here is an example:

<li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li> 

If I have the above code in the list, what tag can I add to this html so that I can then use jQuery to perform actions on the code elements as children?

The above code is just an example, I want to be able to use this method for any html element.

EDIT

Is the <span> tag what I'm looking for?

EDIT2

I tried the following with a span tag:

 <span id="qwerty123"><li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li></span> 

However, the list items are not displayed correctly. I am using the AdminLTE template, and this template uses a custom style for these list items.

How else can I achieve the desired result? Can I add data attributes or some other html coding method?

EDIT3

An html tag with an identifier must be before any other tag, so that all other tags can be considered as child tags.

Answer 1

You can try

 <li> <span id="targetSpan" style="display:none;"> <!-- any children --> </span> <a href="#"> <i class='fa fa-link'></i> <span>Another Link</span> </a> </li> 

In a block context, you can do the same with a " div ":

 <div id="targetDiv" style="display:none;"> <!-- any children --> </div> 

I do not believe that you can use div in li .

Answer 2

The span tag is what you are looking for: it is the only container tag in HTML format. If you do not apply CSS to it, it is just an inline tag that does not change the way your document is displayed.

Read this for more details: http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-span-element

Also note that you can use the div tag and apply CSS display:inline; to achieve the same result.

Hope this helps :)

Answer 3

You can turn on the element and then make it invisible. For example: <i></i> or <em></em> , and then install

 i { visibility: hidden; } 

Then add an identifier and select this item. The item will not affect the page, but will still be selected.

Answer 4

try using a unique identifier like

<li><a href="#"><i class='fa fa-link'></i> <span id="id7843">Another Link</span></a></li>

in this id (id="id7843") you can use your id according to your needs

you can define a class or fuction for this id in jquery, this does not affect any other html unless you have the same identifier . try using a unique identifier for each class that you define.

Answer 5

 <li><a href="#"><i class='fa fa-link'></i> <span id = "putyouridhere">Another Link</span></a></li>