Expanding on a good idea

How to dynamically populate div headings?

[dbtony]

How would one dynamically populate these headings and create divs for each if it exists in the db.

If instead of having a fixed number of divs as in your list of names, what if I had an unknown number of items in the list and I wanted to create as many headings, plus/minus gifs, and div content for each if they existed?

How would I code for that?
Thanks in advance,
Tony

[physics]

I think you're talking about adding divs to the DOM (document object model) which can be done with JavaScript. You would use AJAX to pull the data from your back end database and then JavaScript to manipulate the DOM to add the new divs.

[RonPK]

Why would you want to do this on the client side? To me, it sounds like a page that should be created directly on the server where the database resides. With PHP, ASP, JSP, or any other server side language.

[physics]

Why would you want to do this on the client side?

Normally you wouldn't but if you're writing an interactive AJAX app you may want to do this sort of thing.

[dbtony]

Maybe an example will help.
On this page I know how many divs I want to show in this manner.
<url removed>

But on this page, I do not know how many schools will be available for a given location. I was thinking I would like to be able to click on the school and have more detail available in the div that becomes visible. This would be as apposed to having the school be a link that goes to a detail page.

Birdbrain provided this script for show/hide divs. What I can not figure out is how to create the divs dynamically.

[webmasterworld.com...]

[edited by: encyclo at 11:04 pm (utc) on Mar. 25, 2007]
[edit reason] no URLs please, see TOS [webmasterworld.com] [/edit]

[physics]

For SEO reasons you may want to take RonPK's advice and do this server side, i.e. with your ASP code. If people are searching for a house in a certain school district and the school has to be pulled via JavaScript then Google will not be able to return your page as a result.
But, if you want you can do it with AJAX. Don't have time to make up example code and post here but the idea is that with the A(asynchronous) part of AJAX you grab the information from the database and then with the X part (XML) you get the info back and with the J (JavaScript) part you manipulate the DOM (document object model) to add the div.
Any good book or web site on AJAX will explain this further (also, the newest version of JavaScript: The Definitive Guide discusses this stuff).

[RonPK]

how to create the divs dynamically

With JavaScript, this can be done using two DOM methods:

document.createElement()

[developer.mozilla.org] and

element.appendChild()

[developer.mozilla.org].

<script type="text/javascript"> 
var newDiv = document.createElement('div'); 
newDiv.innerHTML = 'school information here'; 
document.getElementById('parentElement').appendChild(newDiv); 
</script>