javascript - 动态添加更大的内容到 div

Question

我正在使用当我将鼠标悬停在图像上时显示的 div。我想用这个 div 来显示图像信息。如何在 div 中添加几行内容？我发现的唯一解决方案是 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);