CODEWITHSUNDEEP
htmltags
Simon
Simon

Reputation: 8345

Is there an html tag that does not have any effect on an html document?

In html, is there a tag that I can add an id attribute to, that does not have any effect on the html page, but can still be accessed with a 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 a list, what tag can I add to this html, so that I can then use jQuery to perform actions on the code items as children?

The above code is just an example, I am wanting to be able to use this technique for any html element.

EDIT

Is the <span> tag what I am looking for?

EDIT2

I have 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 being displayed correctly. I am using an AdminLTE template and this template uses custom styling for these list items.

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

EDIT3

The html tag with the id needs to be before any of the other tags, so that all the rest of the tags can be treated as children.

Upvotes: 26

Views: 32094

Answers (5)

Bruce
Bruce

Reputation: 1681

try to use Unique ID selector 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 need

your can define class or fuction for that id in jquery it does not affect any other html unless if you are having same id.. try to use unique id for every class you defined.

Upvotes: 0

Alex Domenici
Alex Domenici

Reputation: 769

The span tag is indeed what you are looking for: it's the only HTML inline container tag. Unless you apply CSS to it, it's simply an inline tag that doesn't alter 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

Please also note that you could use a div tag and apply CSS display:inline; to achieve the same result.

Hope this helps :)

Upvotes: 13

ggbranch
ggbranch

Reputation: 559

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

Upvotes: 0

Gabriel Garrett
Gabriel Garrett

Reputation: 2127

You could include an element and then make it invisible. For instance: <i></i> or <em></em> and then set 

i {
    visibility: hidden;
}

And then add an ID and select that element. The element won't affect anything on the page, but will still be capable of being selected.

Upvotes: 0

John Saunders
John Saunders

Reputation: 161831

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 "div":

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

I don't believe you can use a div within the li, however.

Upvotes: 6

Related Questions