Keywords:
Situation:
You want to apply an effect to a group of HTML elements.
Actions:
Wrap them in a container tag. Give the wrapper an id.
Explanation:
Suppose your app computes an answer. You want to show the answer with some other HTML. You write this:
<h2>Got it!</h2>
<p>The answer is <span id="answer-out"></span>.</p>
<p>Woohoo!</p>
In your JS, you compute the variable answer
, and inject it into the HTML:
$("#answer-out").html(answer);
You want the output region – the <h2>
and both <p>
tags – to be hidden to start with, then show all at once.
The wrapper pattern does the job. Wrap the output region in a container tag, usually a <div>
, and give it an id
:
<div id="output-region">
<h2>Got it!</h2>
<p>The answer is <span id="answer-out"></span>.</p>
<p>Woohoo!</p>
</div>
Now you can treat the <h2>
and both <p>
tags as a single unit.
$("#answer-out").html(answer);
$("#output-region").show("slow");