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.
mohknightAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
Plain Javascript DOM.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <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 {
  position:fixed;
  top: 100px;
  left: 100px;
}
    </style>
</head>
<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; 
  row=document.createElement('tr');
  cell=document.createElement('td');
  cell.setAttribute('style', 'width:40px;height:40px;background-color:#00ff00;');
  ele=document.createElement('img');
  ele.setAttribute('src', './images/red.jpg');
  ele.setAttribute('style', 'width:40px;height:40px;border:0px;');
  cell.appendChild(ele);
  row.appendChild(cell);
  tab1.appendChild(row);
  host.appendChild(tab1);
}
</script>
</body>
</html>

Open in new window

0
 
NavneetSoftware EngineerCommented:
HI!

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.

Else
document.getElementById('map').innerHTML=newTable;

Can you share what you are doing with innerHTML


Let me know if iI am missing anything.
1
 
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!
0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.