When writing html table to div, the data from table is unformatted

I am using Javascript to write an HTML table into an HTML div.
However, the data from the table appears, inside the DIV, like one
long line. When I am using the same Javascript code to write the same
table to a HTML page the table appears OK.
The question is: Are there some specific things that I should do when
writing HTML code to a DIV versus writing HTML code to an HTML page?
It looks like inside a DIV the HTML table formatting is gone, only the
data is present.

Thanks in advance for any help on this matter. See snippet of my code
below:

Advertisements

On Feb 4, 5:20 pm, sil <> wrote:
> Hi All,
>
> I am new to HTML and JavaScript.
>
> I am using Javascript to write an HTML table into an HTML div.
> However, the data from the table appears, inside the DIV, like one
> long line. When I am using the same Javascript code to write the same
> table to a HTML page the table appears OK.
> The question is: Are there some specific things that I should do when
> writing HTML code to a DIV versus writing HTML code to an HTML page?
> It looks like inside a DIV the HTML table formatting is gone, only the
> data is present.
>
> Thanks in advance for any help on this matter. See snippet of my code
> below:
> ...

You may want to adjust your tab spacing to a more reasonable size
(like 2 spaces) next time you post code; that's pretty much
unreadable.

The problem, though, comes from not writing the opening and closing
tag of an element at the same time. If you just do "e.innerHTML +=
'<sometag>'", <sometag> will (often? always?) be automatically closed
as soon as it is inserted in order to prevent broken markup.

If you write the opening and closing tags to the innerHTML all at
once, and never write an opening tag without also writing its closing
tag at the same time, it should work the way you expect.

Advertisements

sil wrote:
> I am new to HTML and JavaScript.
>
> I am using Javascript to write an HTML table into an HTML div.
> However, the data from the table appears, inside the DIV, like one
> long line. When I am using the same Javascript code to write the same
> table to a HTML page the table appears OK.
> The question is: Are there some specific things that I should do when
> writing HTML code to a DIV versus writing HTML code to an HTML page?
> It looks like inside a DIV the HTML table formatting is gone, only the
> data is present.
>
> Thanks in advance for any help on this matter. See snippet of my code
> below:
>
> function wDoc( wtxt )
> {
> document.getElementById('profile').innerHTML+=wtxt;
> }

Chances are that you have given an element an ID which type has no `id'
attribute, or that you are appending wrong markup.
> function UpdateProfile() //Partial code

This function does not look as if it would be used as a constructor, so its
identifier should start lowercase.
> {
> var nSelProf =
> ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value;
>
> // Record the currently selected profile for when we
> Submit this form.
> ME.PROFILE_INDEX.value = nSelProf;

Since `ME' aso. not declared here, one must assume it is defined or
declared in an outer execution context. Accessing globals from a local
context like this is considered bad code style (it is error-prone,
inefficient aso). Your function should be passed references to the
objects it is going to modify, and it should use the named arguments
instead.
> wDocClear();
>
> // Write the top, fixed, portion of the document
> wDoc( '<html>' );

This cannot work (reliably). `HTML' is the root element of a Valid HTML
document, and only elements can have an ID (and are found by
document.getElementById()). So you would attempt to create a document of
the form

<html>
...
<... id="profile">
<html>
...
</html>
</...>
...
</html>

here, which is obviously not Valid. This and the missing `</table>'
end tag is very likely the reason why you observe what you describe.

Forget about this approach.

If you want to write a complete document, use *one* document.write() call
(preceded by a document.open() call and followed by a document.close()
call) to write a string you build before, keep the `HTML' element and write
a DOCTYPE declaration before it.

If you want to update only a specific portion of the document, lose the
`HTML' element and all other elements that MUST NOT be children of the
target element (in your case that target element is the `DIV' element).
You should also avoid `innerHTML', especially with tables; use DOM creator
and mutator methods instead. If you use `innerHTML', though, do not append
to the property repeatedly, but assign to it *once* a string that you build
earlier.

However, since you have not been aware of this script-*unrelated* problem,
it might be a better idea to learn writing proper static HTML before you
attempt to do it dynamically.

On Feb 4, 7:26 pm, Thomas 'PointedEars' Lahn <>
wrote:
> sil wrote:
> > I am new to HTML and JavaScript.
>
> > I am using Javascript to write an HTML table into an HTML div.
> > However, the data from the table appears, inside the DIV, like one
> > long line. When I am using the same Javascript code to write the same
> > table to a HTML page the table appears OK.
> > The question is: Are there some specific things that I should do when
> > writing HTML code to a DIV versus writing HTML code to an HTML page?
> > It looks like inside a DIV the HTML table formatting is gone, only the
> > data is present.
>
> > Thanks in advance for any help on this matter. See snippet of my code
> > below:
>
> > function wDoc( wtxt )
> > {
> > document.getElementById('profile').innerHTML+=wtxt;
> > }
>
> Don't, see below.
>
> > function wDocClear()
> > {
> > document.getElementById('profile').innerHTML="";
> > }
>
> Chances are that you have given an element an ID which type has no `id'
> attribute, or that you are appending wrong markup.
>
> > function UpdateProfile() //Partial code
>
> This function does not look as if it would be used as a constructor, so its
> identifier should start lowercase.
>
> > {
> > var nSelProf =
> > ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value;
>
> > // Record the currently selected profile for when we
> > Submit this form.
> > ME.PROFILE_INDEX.value = nSelProf;
>
> Since `ME' aso. not declared here, one must assume it is defined or
> declared in an outer execution context. Accessing globals from a local
> context like this is considered bad code style (it is error-prone,
> inefficient aso). Your function should be passed references to the
> objects it is going to modify, and it should use the named arguments
> instead.
>
> > wDocClear();
>
> > // Write the top, fixed, portion of thedocument
> > wDoc( '<html>' );
>
> This cannot work (reliably). `HTML' is the root element of a Valid HTML
> document, and only elements can have an ID (and are found by
> document.getElementById()). So you would attempt to create a document of
> the form
>
> <html>
> ...
> <... id="profile">
> <html>
> ...
> </html>
> </...>
> ...
> </html>
>
> here, which is obviously not Valid. This and the missing `</table>'
> end tag is very likely the reason why you observe what you describe.
>
> Forget about this approach.
>
> If you want to write a complete document, use *one* document.write() call
> (preceded by a document.open() call and followed by a document.close()
> call) to write a string you build before, keep the `HTML' element and write
> a DOCTYPE declaration before it.
>
> If you want to update only a specific portion of the document, lose the
> `HTML' element and all other elements that MUST NOT be children of the
> target element (in your case that target element is the `DIV' element).
> You should also avoid `innerHTML', especially with tables; use DOM creator
> and mutator methods instead. If you use `innerHTML', though, do not append
> to the property repeatedly, but assign to it *once* a string that you build
> earlier.
>
> However, since you have not been aware of this script-*unrelated* problem,
> it might be a better idea to learn writing proper static HTML before you
> attempt to do it dynamically.
>
> See the FAQ for details: <http://jibbering.com/faq/#posting>
>
> PointedEars
> --
> realism: HTML 4.01 Strict
> evangelism: XHTML 1.0 Strict
> madness: XHTML 1.1 as application/xhtml+xml
> -- Bjoern Hoehrmann

Hi,

I followed your advise. That is, generating the whole string and then
writing it only once to the innerHTML. It worked beautifully.

Re: When writing html table to div, the data from table is unformatted

Hans-Georg Michna wrote:
> sil wrote:
>> I followed your advise. That is, generating the whole string and
>> then writing it only once to the innerHTML. It worked beautifully.
>
> It may still not always work, because Internet Explorer cannot
> insert certain table-related tags through innerHTML. Citation
> from
> http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx :
> [...]
> The property is read/write for all objects except the following,
> for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML,
> STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has
> no default value.
> ...
> ----- End Citation -----
>
> Note the HTML elements in the last paragraph. Even if innerHTML
> works for you now, it may fail always or under certain unknown
> conditions in all versions of Internet Explorer.

ISTM you are misinterpreting. The paragraph above indicates that writing a
TABLE element into another element using `innerHTML', as the OP does, is
never going to fail in any version of Internet Explorer. Attempting to
write other elements into a TABLE element, however, is bound to fail there.

So there really is no reason for FUD like "it may fail always or under
certain unknown conditions"; the conditions under which it is going to fail
are well-documented.
> So I can only underwrite what Thomas already wrote:
>
> "You should also avoid `innerHTML', especially with tables; use
> DOM creator and mutator methods instead."

I stand by my recommendation. Your argument is a non sequitur, though.

Share This Page

Welcome to The Coding Forums!

Welcome to the Coding Forums, the place to chat about anything related to programming and coding languages.

Please join our friendly community by clicking the button below - it only takes a few seconds and is totally free. You'll be able to ask questions about coding or chat with the community and help others.
Sign up now!