Creating divs dynamically

[minli98]

Hi all,

I am trying to create a dynamic page with ajax where the user enters in productIDs and see the product details. After he types in a product ID, the ajax part pulls the info from the database, and displays it in a div within the page.

My problem is I would like to allow the user to enter in as many product IDs as he wants, with each of the product info in its own div.

So, initially we won't know how many divs there will be. Each time a new product ID is entered, a new div is created, and the downloaded product info is displayed within that div. Is there a way to do that: to add a new div in the middle of the page dynamically? I tried using document.write, but it ends up creating the div in a new page.

The alternative that I could think of is to create a large number of divs, each with numbered id, and fill them, as necessary, with the product info using innerHTML. Not exactly a clean solution, but I figure it would work.

Regards,
Min

 

[BillyRayPreachersSon]

To create elements dynamically, you would use the createElement method of the document object:

var tempDiv = document.createElement('div');

to append it in the middle of a document, you first need to decide where you want to put it. Let's say you have an empty container for all these DIVs, with an ID of "myDivContainer":

<div id="myDivContainer"></div>

to add more DIVs inside this, you would use:

document.getElementById('myDivContainer').appendChild(tempDiv);

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[minli98]

Dan, thanks very much for the brief tutorial. I will give it a try.

Regards,
Min