Solved

Incrementing the innerHTML property like a string

Posted on 2006-06-21
2
366 Views
Last Modified: 2011-09-20
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
Comment
Question by:chsalvia
2 Comments
 
LVL 23

Accepted Solution

by:
Jens Fiederer earned 125 total points
ID: 16955063
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
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 125 total points
ID: 16955179
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Popup write two lines 3 22
javascript form submition 2 21
Glitching Slide Show 19 26
Word Press Fixes to Google Speed Test Issues 2 17
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question