/\* fullfill dots in single row \*/ do { this\_row = "row" + irow; document.getElementById("this\_row").innerHTML = '<div id="col' + icol + '\_'+ irow'" class="dot" style="left: ' + k +'%;"></div>'; icol++; k = k + 100/240; } while (icol < 240);
Mit el.innerHTML = '…'
wird der Inhalt mit etwas neuem überschrieben. Dabei wird der bestehende Inhalt gelöscht.
Du kannst z.B. erst einen String zusammenbauen, dann am Ende einmal innerHTML setzen:
var str = '';
str += '<div>';
for (var i = 0; i < 10; i++) {
str += '<p>' + i + '</p>';
}
str += '</div>';
element.innerHTML = str;
Es gibt noch andere Möglichkeiten, den DOM-Baum zusammenzubauen, die vielleicht sinnvoller sind:
-
insertAdjacentHTML('beforeend', 'HTML-Code') parst den HTML-Code hängt ihn an das Element an, ohne den Inhalt zu überschreiben.
-
Arbeiten mit den DOM-Methoden auf Elementebene anstatt auf HTML-String-Ebene.
http://de.selfhtml.org/javascript/objekte/document.htm#create_element
http://de.selfhtml.org/javascript/objekte/document.htm#create_text_node
http://de.selfhtml.org/javascript/objekte/node.htm
http://de.selfhtml.org/javascript/objekte/node.htm#append_child
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm
Mathias