mixing document.createElement and innerHTML?

[jrenae]

Hello,

I'm trying to do a javascript function which will create a new div called "myDiv1", "myDiv2" depending on how many enitities the user chooses, that contains a table which contains a select tag.

This new div will be appended to an established div called "divPlaceSpecDep" (static div already placed on the page).

I've previously done this by just building the innerHTML, appending to it, and rebuilding it every time the user chooses a new entity. HOwever, this time I'm trying to use the document.createElement function, as it's seeming a little easier to work with.

The output per entity I want is like this:

<div id="myDiv1">
<table>
<tr><td>myEntity1</td></tr>
<tr><td><select id="mySelect1">
<option value=1>option1Text</option>
<option value=2>option2Text</option>
</select></td></tr>
</table>
</div>

I already have the code that creates the select tag with the options by using the document.createElement function. Then I use divPlaceSpecDep.appendChild to add it to my html.

Now I just need to get it into a more tabular format so it looks nice.

My question is how to mix the document.createElement and div.innerHTML effectively? I tried to create a table element then append the select tag to it but it wasn't working.

Does anyone have a simple example for what I'm trying to do?

Thanks in advance.

 

[dwarfthrower]

Why mix the two? Why not create the table in the same manner?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

 

[jrenae]

just because I'm new to using the dom, it's easier for me to construct the html. That doesn't mean I think that's the best way to do it. I was just trying to get it done since I had to present it today.

I wasn't sure how to add a table, a row, a cell and content to the cell using the dom.

I wasn't sure if I create the table, create the row, add the row to the table, create the cell, add the cell to the row, then add the content to the cell.

OR
if I create the cell, add the content to it, then create the row, add the cell to the row, then create the table and add the row to the table (going backwards)..

I know...I need to learn how to use the dom better.

Thanks

 

[BillyRayPreachersSon]

Using "innerHTML" to build elements is always the fastest method. More so if you have many elements to create. It works cross-browser (IE, Fx, Safari, Opera, etc), so there's no real reason to not use it.

If you do decide to build tables without it, you need to build the whole table structure (Table [, Thead], Tbody, Tr, Td [, Tfoot]) for it to work - you cannot simply put a select element in a table element. The best way to build tables dynamically is to use specific methods for this job, so check out things like "insertRow" and "insertCell", rather than "createElement".

Read here for more:

http://msdn.microsoft.com/workshop/author/tables/buildtables.asp

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

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

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

[/tt]