Question

I have a list and each item has a button. When I click the button I want a div to appear within the list item. The contents of this appearing div will be the same for each list item. How do I dynamically generate these divs using Javascript?

I’ve investigated the createElement() function but have yet to grasp its use or find a good example.

Answer 1

You can use document.createElement(), but it’s not really way you want to do it (mostly because of performance).

What you really need to do is to have your DIV as part of your markup, but make it invisible with CSS. And then just copy it to LI innerHTML.

Something like this:

CSS:
.hidden-element
{
   display:none;
}

HTML:
<ul>
  <li id="firstListItem"></li>
</ul>

<div  id="myDiv" class="hidden-element">
     <div>My Div Content</div>
</div>

JavaScript:

function showDivContent()
{
 var listItem = document.getElementById('firstListItem');
 var myContent = document.getElementById('myDiv').innerHTML;
 listItem.innerHTML = myContent;
}