ansaurus

Question

Javascript: Using createElement to generate Div on Button Click

Answer 1

+1 A:

Hi Charlie,

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;
}

dimarzionist 2010-08-25 02:19:21

I like this solution. Couple questions though. Can I do something like:`listItem.innerHTML += myContent;//Append`Or is there an append comand I should use?Secondly, what if that nested div within the hidden-element has an onclick() handler. Can I programtically change the function parameters of that onclick() handler.?

Charlie 2010-08-25 02:34:48

Yes, you can append the content, innerHTML is the simple string for JS. If your parameters for onclick event are dependent on DIV itself, then it's better to pass this as parameter:onclick="myFunction(this);"Alternatively you can assign onclick handler dynamically when you adding DIV element itself:firstListItem.innerHTML = myContent;for(var j=0; j<firstListItem.childNodes.length; j++){ if(firstListItem.childNodes[j].tagName == 'DIV') //ideally check for id firstListItem.childNodes[j].onclick = function () {alert('Test me!');};}Or even better use jQuery.bind() :)Good luck!

dimarzionist 2010-08-25 06:37:16

The supposed performance issue with `document.createElement()` is only a concern if you're using it to create loads of elements. For a few elements, it's never going to be an issue, and has significant advantages over `innerHTML`.

Tim Down 2010-08-25 08:42:10

It's true. However when I don't know how complex is the inner content of the div is going to be I'd go with innerHTML and let browser rendering engine do it work :) I'm using here the same approach as for StringBuilder usage - if it's big number of strings or idk exact number I'll use it. Cheers

dimarzionist 2010-08-27 01:05:28

Answer 2

A:

var newDiv = document.createElement("div") // You now have an HTMLFragment
    newDiv.id = "Something"
document.body.appendChild(newDiv) // The body now has a new div appended to it.

John 2010-08-25 02:19:31

`HTMLFragment`? Perhaps you're confusing `document.createElement()` with `document.createDocumentFragment()`. `document.createElement()` creates an element.

Tim Down 2010-08-25 08:45:08

I thought anything that was not yet tied down to the dom was considered a "fragment", my bad.

John 2010-08-25 18:36:02

ansaurus

tags:

views:

answers:

Javascript: Using createElement to generate Div on Button Click

related questions