1

I'm javascript to loop through a large number of items and using 

   document.getElementById("flap" + i).innerHTML = flap(i)

to write to a large number (50 at a time) of DIVs on my page. Rather than filling my HTML page with a large number of DIVs which in most cases won't be used I would like to use:

HTML DOM createElement() Method ...... to create the 50 DIVs on the fly and only as many as I need.

Here is my sample HTML DIV which I need to create on the fly (so, I need to start at "0" and create up to "49":

    <div style="clear:both"> <br> </div>
    <div id="flapBox3">
        <p id='whenFlap3' class= "mscFlapTime">&nbsp &nbsp &#149 &nbsp posted &nbsp<b >7    minutes ago</b></p>
        <b id='flapSum3' class= "mscFlapSumBold">Summary</b>    
        <p id='flap3'class= "mscFlapText" >Lorem ipsum .. </p>            
    </div>

I'm not sure how to do this and sure could use some help! Thanks!!!

hypermiler
  • 1,969
  • 4
  • 19
  • 27
  • Right now I got my thumb up my nose with no clue how to assign ids and classes and such to the divs I create !!! :-/ – hypermiler Jan 22 '14 at 22:12

2 Answers2

4

You can, but adding elements to the DOM over and over a gain is really quite slow because it forces the browser to reflow/repaint the viewport every time. It's much more efficient to build up your HTML in memory and insert it all in one go at the end.

You can build it up as a string, then use innerHTML to insert it. Alternately you can create DOM nodes in a document fragment, then insert that into the DOM.

See: Add to DOM without jQuery on how to add and manipulate a dom node. This example does not use multiple nodes, but you'll get the idea.

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • AWESOME! Now, that's the kinda advice I was looking for. Thanks! Hmmm. Lemme think now..... – hypermiler Jan 22 '14 at 22:17
  • OK. Maybe it's just easiest and best to create 50 DIVs on my page and hide/unhide them.... this is a mobile app that's being built to run everywhere, even on slowest devices. The HTML will be rewritten a LOT, so just wondering if you think this is fastest. Alternatively, if I had to create say 14 DIVS, how would I do this "all at once" so I only wrote to DOM once. I'm looping through the array items. – hypermiler Jan 22 '14 at 22:20
  • 1
    use a document fragment instead of string. Then you add the divs to the fragment and when done insert the fragment into the DOM – Mike-O Jan 22 '14 at 22:20
  • Hiding/unhiding them is a separate issue. You can great them as hidden then reveal them later. This shows how you can do it without adding them manually. – Diodeus - James MacFarlane Jan 22 '14 at 22:21
  • Also, you guys are losing me. What's a document "fragment" – hypermiler Jan 22 '14 at 22:25
  • In the example: var div = document.createElement("div"); - you can just heep adding to "div" in a loop. It's just a variable containing DOM elements. – Diodeus - James MacFarlane Jan 22 '14 at 22:26
1

here is a basic example using innerHTML:

http://jsfiddle.net/rn5GG/2/

var template =  document.getElementById('template').innerHTML;
var htmlString = template;

for(var i=0;i<50;i++){
htmlString += template;
}

document.body.innerHTML =  htmlString;

HTML:

 <div id='template' style="clear:both"> <br> 
<div id="flapBox3">
    <p id='whenFlap3' class= "mscFlapTime">&nbsp &nbsp &#149 &nbsp posted &nbsp<b >7    minutes ago</b></p>
    <b id='flapSum3' class= "mscFlapSumBold">Summary</b>    
    <p id='flap3'class= "mscFlapText" >Lorem ipsum .. </p>            
</div>
CodeToad
  • 4,656
  • 6
  • 41
  • 53
  • Question for you... how's this thing looping through writing new DIVs when the document.body.innerHTML = htmlString; statement is outside of the loop? – hypermiler Jan 22 '14 at 22:37
  • Your welcome. Once you are more familiar with JavaScript, check out frameworks like angular, ember, knockout, etc.. that bind html to your data and accomplish type of task dynamically for you. knockout has a great interactive tutorial that's easy to follow. http://learn.knockoutjs.com/http://learn.knockoutjs.com/ – CodeToad Jan 22 '14 at 22:38
  • it builds one huge string with all the elements, then adds them in one shot. – CodeToad Jan 22 '14 at 22:39
  • Also, where do I put my document.getElementById("flap" + i).innerHTML = flap(i) statements. I don't want to loop through the array a second time for performance reasons..... – hypermiler Jan 22 '14 at 22:40
  • OHHHHHHHHHHH! I getcha. awesome! – hypermiler Jan 22 '14 at 22:41
  • So, this creates a bunch of new Divs, but do they have the sequential IDs I need in order to write to them? – hypermiler Jan 22 '14 at 22:44
  • if you want sequential ids, insert the value of i in the loop into the string at the appropriate location using string.replace or adding 2 strings with i in the middle. – CodeToad Jan 22 '14 at 22:50
  • Whoa! Slow down there Hoss. If I squint real hard, I think I get what you mean. Thanks! – hypermiler Jan 22 '14 at 22:56
  • http://stackoverflow.com/questions/1144783/replacing-all-occurrences-of-a-string-in-javascript try the split-join method. – CodeToad Jan 22 '14 at 23:18