CODEWITHSUNDEEP
html
panthro
panthro

Reputation: 24099

Storing hidden HTML on a page?

I need to store some hidden HTML for each li element. What's the best way to do this?

I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.

I've managed to do it by storing the data in a hidden text area for each li.

Is this the best way to do it? Or is there a better way.

I'm storing around 200 chars.

Upvotes: 1

Views: 1993

Answers (9)

johny why
johny why

Reputation: 2221

Here are two methods not mentioned in other answers.

The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.

Method 1

<template>
<div>Here's my hidden HTML.</div>
</template>

Method 2

<span hidden>
<div>Here's my hidden HTML.</div>
</span>

Upvotes: 0

Fals
Fals

Reputation: 6839

You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.

<input type="hidden" id="myId" value="value here pls..." />

Hopes this help you!

Upvotes: 1

Sharky
Sharky

Reputation: 6294

another approach:

if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?

<li> your code....      
<!-- 
    <div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>

Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.

Otherwise i'm in favor of display:none in a wrapped div.

Captain Obvious.

Upvotes: 0

user1119424
user1119424

Reputation: 29

If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as 

<li value="11">DISPLAY ITEM</li>

Upvotes: 0

PaulProgrammer
PaulProgrammer

Reputation: 17690

One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.

http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm

<script id="foo" type="text/template">
  <p>your text here</p>
</script>

now in real javascript:

<script type="text/javascript">
    <!-- assume jquery for the sake of assuming something -->
    $(function() {
    fooTemplate = $("#foo").clone();
    $("#target").append(fooTemplate);
    });
</script>

I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.

Upvotes: 0

Muhammad Saqlain Arif
Muhammad Saqlain Arif

Reputation: 544

try this
<div style="display:none;">your html here.....</div>

Upvotes: 0

Mohamad
Mohamad

Reputation: 35359

Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:

#my_content {
   text-indent: -9999px;
}

Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.

Upvotes: 0

Kirka121
Kirka121

Reputation: 505

<input type="hidden" value="your hidden stuff here" />

Upvotes: 1

Oded
Oded

Reputation: 499372

Put your hidden HTML in a div / span with a CSS class that has:

 display: none;

See the display property.

Upvotes: 5

Related Questions