动态地向div添加更大的内容

Question

我使用的是当我将鼠标悬停在图像上时显示的div。我想用这个div来显示图像信息。如何在div中添加几行内容？我找到的唯一sollution是div的innerHTML属性，但这意味着我必须将它用于我想要放在div上的aech值。有没有办法可以用一个命令在div上添加更多内容。我想用javascript或dojo实现这一点。

Answer 1

每次使用innerHTML时，屏幕都必须重排/重绘。更好的模式是创建一个文档片段并在使信息“生效”之前“离线”更新它：

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