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