How do I dynamically (onclick) insert a table into a DIV with DHTML (i.e. JavaScript, DOM, etc.)?

I have two DIVs with unique ids "map" and "state-info". "Map" contains a set of links in an image map and the content of "state-info" is supposed to change depending on the user clicking a link in "map".

To be exact, the content of "map" is a map of my country and "state-info" is supposed to contain a table of registration locations per state which will change as you click on the hotspot corresponding to each state in "map".

The problem I'm having is I can't find a way to dynamically insert a table, list, or any other formatted HTML construct into a DIV using the innerHTML attribute or any other way that I can see. I'm still investigating but I would certainly appreciate some help here.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Navneet.Net Full Stack DeveloperCommented:

Did you try JQuery, It's awesome and it should be feasible for you to introduce JQuery in and get what you want easily and in more creative way.

Let me know if you want  and help on Jquery.


Can you share what you are doing with innerHTML

Let me know if iI am missing anything.
Tom BeckCommented:
Plain Javascript DOM.
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <meta name="keywords" content="test" />
    <meta name="description" content="test" />
    <title>Some Title</title>

<style type="text/css">
    .position1 {
  top: 100px;
  left: 100px;
<body onload="javascript:make_table();">
    <div class="position1" id="table_div"></div>
    <script type="text/javascript" language="javascript">
function make_table() {
  var host=document.getElementById('table_div');  
  var tab1=document.createElement('table');
  tab1.setAttribute('cellpadding', '0'); 
  tab1.setAttribute('cellspacing', '0');
  tab1.setAttribute('style', 'width:200px;height:100px;border:solid 1px #000;'); 
  var row, cell, ele; 
  cell.setAttribute('style', 'width:40px;height:40px;background-color:#00ff00;');
  ele.setAttribute('src', './images/red.jpg');
  ele.setAttribute('style', 'width:40px;height:40px;border:0px;');

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mohknightAuthor Commented:
I'm not sure it's the most efficient way of getting it done, but it works! At this point, that's all that matters!
Tom BeckCommented:
It may seem a little clumsy, but innerHTML is not part of the W3C specification even though most browsers recognize it so I try to avoid using it just on principal.

Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.