storing additional data on a html page

Question

I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else? is there some standard way?

Answer 1

I don't think there is a standard way; I would store them in JavaScript source code.

Answer 2

One of:

1. Hidden input fields (if you want to submit it back to the server); or
2. Hidden elements on the page (hidden by CSS).

Each has applications.

If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.

Answer 3

I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.

Answer 4

If I need to put some information in the html that will be used by the javascript then I use

<input id="someuniqueid" type="hidden" value="..." />

Answer 5

Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.

Answer 6

You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.

Then use JavaScript to change the style of the container when you are ready:

var blockit = function () {
    var container = document.getElementById("containerid");
    container.style.display = "block";
};