# Wrapper

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>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");