Question

I am using a div that is shown when I hover over an image. I want to use this div to display image info. How can I add a few lines of content to the div? The only sollution I found is innerHTML property of the div, but this means I have to use this for aech value I want to put on a div. Is there a way I can put more content on a div with a single command. I want to achieve this using javascript or dojo.

Answer 1

every time you use innerHTML the screen has to reflow/repaint. better pattern is to create a document fragment and update it “offline” before make the info “live”:

var p, t, frag;
divInf = document.createElement('div');
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first line');
p.appendChild(t);
frag.appendChild(p);

p = document.createElement('p');
t = document.createTextNode('second line');
p.appendChild(t);
frag.appendChild(p);

divInf.appendChild(frag);