• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

Incrementing the innerHTML property like a string

I'm writing a function that dynamically generates tables, by incrementing the innerHTML property of a surrounding <div>.

But, I need to break the procedure up into multiple lines, because of a few for loops.  But, when I try to increment .innerHTML using multiple statements, I loose the formatting on the table.

For example, I have:

parentElem.innerHTML = "<table id = '" + tableId + "' width = '99%' class = 'resulttext' style = 'margin: 4px 4px 6px 4px; color: #818284; background-color: #FFFFFF; border-collapse: collapse' border = '0' cellspacing = '0' cellpadding = '0'><tr>";


parentElem.innerHTML += "<td>Sample Text</td></tr></table>";

In this case, even though I formatted the table with specific styles, the formatting does not appear in the browser.  However, if I do this all on one line like:

parentElem.innerHTML = "<table id = '" + tableId + "' width = '99%' class = 'resulttext' style = 'margin: 4px 4px 6px 4px; color: #818284; background-color: #FFFFFF; border-collapse: collapse' border = '0' cellspacing = '0' cellpadding = '0'><tr><td>Hey hey!</td></tr></table>";

...then it works fine.  I don't understand why this is happening.  Can anyone explain what I'm doing wrong here?

0
chsalvia
Asked:
chsalvia
2 Solutions
 
Jens FiedererTest Developer/ValidatorCommented:
Everytime you change the value of innerHTML, you must have valid HTML.

If
parentElem.innerHTML += "<td>Sample Text</td></tr></table>";
would have generated valid HTML, it must NOT have had valid HTML before  (it would have had to have an unmatched <table> tag!).

If you want to build HTML incrementally, do the incrementing in a string variable, and ONCE VALID HTML HAS BEEN ACHIEVED, copy it to innerHTML.
0
 
ZvonkoSystems architectCommented:
Or simply said: after first assignment is your <table> closed internaly by a </table> tag automaticaly. Next html is then outside of that table.
Look for PageSpy to see the dynamic html automatic completition: http://www.experts-exchange.com/M_1344026.html
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now