In the previous entry I showed how to use <div> as a reusable block to make an unobtrusive popup wizard. Problem with that entry is that it has too much concepts and one may miss out the advantage of this one particular technique so i am dedicating an entry just for it.
This technique involves applying HTML content of a <div> in one part of a page to another, usually a placeholder, so the effect is like calling a function that we are familiar with from other programming languages.
First, you need a placeholder where the reusable HTML will be applied to. For this example it will be
Now create hidden <div>s with the content you want to reuse:
To get content of any of the reusable <div>s and use it as a part of the main content use this JavaScript:
1 |
document.getElementById("mainContent").innerHTML = document.getElementById("step1").innerHTML
|
You can use some logic to dynamically figure out which of the reusable <div>s to be applied.
| < Prev | Next > |
|---|
