Hi all,

New to Javascript, and want to learn to do things the RIGHT way.

I have a dynamic table which is populated using Javascript. Currently I
am looking at adding nodes using the W3C DOM, but these seems pretty
long winded, especially adding all the attributes etc.

Is there a way to just blat in a lump of HTML text, or is this frowned
upon now?

Cheers,
Lister

listerofsmeg01@hotmail.com said the following on 10/22/2006 5:49 PM:
> Hi all,
> 
> New to Javascript, and want to learn to do things the RIGHT way.
> 
> I have a dynamic table which is populated using Javascript. Currently I
> am looking at adding nodes using the W3C DOM, but these seems pretty
> long winded, especially adding all the attributes etc.
> 
> Is there a way to just blat in a lump of HTML text, or is this frowned
> upon now?

Use DynWrite as in the group FAQ.
<URL: http://jibbering.com/faq/#FAQ4_15>

-- 
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Randy Webb wrote:
> listerofsmeg01@hotmail.com said the following on 10/22/2006 5:49 PM:
> > Hi all,
> >
> > New to Javascript, and want to learn to do things the RIGHT way.
> >
> > I have a dynamic table which is populated using Javascript. Currently I
> > am looking at adding nodes using the W3C DOM, but these seems pretty
> > long winded, especially adding all the attributes etc.
> >
> > Is there a way to just blat in a lump of HTML text, or is this frowned
> > upon now?
>
> Use DynWrite as in the group FAQ.
> <URL: http://jibbering.com/faq/#FAQ4_15>

DynWrite is based on innerHTML, which is not the best way to modify
tables. It is OK when used to write an entire table, or the contents of
a cell, but it should never be used for the components of a table
(tableSection, tableRow, etc.).


For the OP:

insertRow and insertCell are quite efficient ways to add elements to a
table.  Using CSS to style them can save on table-building code.  You
might also find it suitable to clone entire rows, then modify the
content of cells.

  <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >
  <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >

-- 
Rob

RobG a �crit :
> 
>   <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >
>   <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >

what does mean 'IDL' in 'IDL definition' ?

ASM wrote:
> RobG a =E9crit :
> >
> >   <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >
> >   <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >
>
> what does mean 'IDL' in 'IDL definition' ?

Interface Definition Langauge:

  "a generic term for a language that lets a program or object
   written in one language communicate with another program
   written in an unknown language."

  <URL:
http://whatis.techtarget.com/definition/0,,sid9_gci212314,00.html >


--=20
Rob

> DynWrite is based on innerHTML, which is not the best way to modify
> tables. It is OK when used to write an entire table, or the contents of
> a cell, but it should never be used for the components of a table
> (tableSection, tableRow, etc.).

I see that innerHTML is an MS extension. Is there sufficient cross
browser support to warrent using it?

Out of interest, why shouldn't it be used for tables?

> insertRow and insertCell are quite efficient ways to add elements to a
> table.  Using CSS to style them can save on table-building code.

Well I'm afraid I got so hung up on "not using tables for layout", that
I created this particular  table using CSS, even though it is a
perfectly valid table - d'oh!
Is InnerHTML OK in this instance?

Many thanks,
Lister

In message <HZKdnQ6oUoG5ZabY4p2dnA@telcove.net>, Sun, 22 Oct 2006
19:01:08, Randy Webb <HikksNotAtHome@aol.com> writes
>listerofsmeg01@hotmail.com said the following on 10/22/2006 5:49 PM:

>>  I have a dynamic table which is populated using Javascript.
>>Currently I
>> am looking at adding nodes using the W3C DOM,

>Use DynWrite as in the group FAQ.
><URL: http://jibbering.com/faq/#FAQ4_15>

ISTM that being able to use the W3C DOM may imply, in practice, being
able to use getElementById and not needing document.all.

If so, IMHO, there should also be in 4.15 a shorter DynWrite using only
gEBI.  It's still worth having the function (in an include file), for
compactness and legibility of code in Web pages.  Only rarely will it be
necessary to cache the gEBI result in a variable.


>comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
                                                     ??????????????????

-- 
 (c) John Stockton, Surrey, UK.  ?@merlyn.demon.co.uk   Turnpike v6.05   IE 6
 <URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
 <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
 <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

listerofsmeg01@hotmail.com a �crit :
> Well I'm afraid I got so hung up on "not using tables for layout", that
> I created this particular  table using CSS, even though it is a
> perfectly valid table - d'oh!
> Is InnerHTML OK in this instance?

lost url to your page

innerHTML would have to be use only with what is between tags (between 
onening and closind)

Example of malfunction :
http://perso.orange.fr/stephane.moriaux/truc/innerHTML_danger

A work about adding row(s) to a table,
I don't know if it is correct with IE :
<http://perso.orange.fr/stephane.moriaux/internet/web_dom/clones/test_clones_css_dom_min>

-- 
ASM

Randy Webb wrote:

> Use DynWrite as in the group FAQ.
> <URL: http://jibbering.com/faq/#FAQ4_15>

Then the FAQ needs an update. DynWrite uses .innerHTML, which is surely
not a good thing to be encouraging in new code.

The "right" way is to use the DOM methods, even though they're
long-winded. Wrap them up as needed to keep the coding effort down.

Andy Dingley <dingbat@codesmiths.com> a �crit :
> 
> Then the FAQ needs an update. DynWrite uses .innerHTML, which is surely
> not a good thing to be encouraging in new code.

simple example to add an element with DOM :
http://perso.orange.fr/stephane.moriaux/truc/add_input

-- 
ASM

listerofsmeg01@hotmail.com wrote:
>> DynWrite is based on innerHTML, which is not the best way to modify
>> tables. It is OK when used to write an entire table, or the contents of
>> a cell, but it should never be used for the components of a table
>> (tableSection, tableRow, etc.).
> 
> I see that innerHTML is an MS extension. Is there sufficient cross
> browser support to warrent using it?
> 
> Out of interest, why shouldn't it be used for tables?

Using innerHTML on table row or section elements will cause errors in IE 
at least.  Microsoft's documentation says:

   "To change the contents of the table, tFoot, tHead, and tr
    elements, use the table object model described in How to
    Build Tables Dynamically."

<URL: 
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp 
  >

>> insertRow and insertCell are quite efficient ways to add elements to a
>> table.  Using CSS to style them can save on table-building code.
> 
> Well I'm afraid I got so hung up on "not using tables for layout", that
> I created this particular  table using CSS, even though it is a
> perfectly valid table - d'oh!
> Is InnerHTML OK in this instance?

It has nothing to do with what you use tables for, only how you modify 
them (innerHTML is just a property, it can't differentiate whether the 
table is being used for tabular data or just layout). :-)


-- 
Rob

J R Stockton said the following on 10/23/2006 7:27 AM:
> In message <HZKdnQ6oUoG5ZabY4p2dnA@telcove.net>, Sun, 22 Oct 2006
> 19:01:08, Randy Webb <HikksNotAtHome@aol.com> writes
>> comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
>                                                      ??????????????????

Yikes! That is the result of me not paying attention to my signature :\

Guess my mind wasn't prepared enough....
-- 
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Andy Dingley <dingbat@codesmiths.com> said the following on 10/23/2006 
7:40 AM:
> Randy Webb wrote:
> 
>> Use DynWrite as in the group FAQ.
>> <URL: http://jibbering.com/faq/#FAQ4_15>
> 
> Then the FAQ needs an update. 

With regards to Tables, yes. DynWrite is a poor way to try to modify 
tables. That was an error on my part of referring to it without 
realizing the OP was modifying Tables.

> DynWrite uses .innerHTML, which is surely not a good thing to 
> be encouraging in new code.

Sure it is. It is very widely supported. I don't know of a "modern" 
browser (read - under 5 years old) that doesn't support it.

> The "right" way is to use the DOM methods, even though they're
> long-winded. Wrap them up as needed to keep the coding effort down.

If it were that simple, it would already be in the FAQ. The problem is 
the long-winded solution it would take to emulate innerHTML using DOM 
methods. You would basically have to write an HTML parser in JS.  Not 
pretty and not worthwhile for the FAQ.

-- 
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

listerofsmeg01@hotmail.com said the following on 10/23/2006 4:23 AM:
>> DynWrite is based on innerHTML, which is not the best way to modify
>> tables. It is OK when used to write an entire table, or the contents of
>> a cell, but it should never be used for the components of a table
>> (tableSection, tableRow, etc.).
> 
> I see that innerHTML is an MS extension. Is there sufficient cross
> browser support to warrent using it?

Yes. It is very widely supported in modern browsers.

> Out of interest, why shouldn't it be used for tables?

It whacks them out and throws errors. It was a mistake on my part of 
referring to it for use with tables.

-- 
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

RobG a �crit :
> listerofsmeg01@hotmail.com wrote:
>> I see that innerHTML is an MS extension. Is there sufficient cross
>> browser support to warrent using it?

Only to feed/delete/change content of a cell (a TD) (if this content is 
not a form element), or caption.

>   "To change the contents of the table, tFoot, tHead, and tr
>    elements, use the table object model described in How to
>    Build Tables Dynamically."
> 
> <URL: 
> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp 
>  >

( createTHead/deleteTHead createTFoot/deleteTFoot 
createCaption/deleteCaption insertRow/deleteRow	insertCell/deleteCell)

Do all these instructions (smelling specific IE's) are supported by 
other browsers ? and if yes witch ones

ASM wrote:
> RobG a =E9crit :
> > listerofsmeg01@hotmail.com wrote:
> >> I see that innerHTML is an MS extension. Is there sufficient cross
> >> browser support to warrent using it?
>
> Only to feed/delete/change content of a cell (a TD) (if this content is
> not a form element), or caption.
>
> >   "To change the contents of the table, tFoot, tHead, and tr
> >    elements, use the table object model described in How to
> >    Build Tables Dynamically."
> >
> > <URL:
> > http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/in=
nerhtml.asp
> >  >
>
> ( createTHead/deleteTHead createTFoot/deleteTFoot
> createCaption/deleteCaption insertRow/deleteRow	insertCell/deleteCell)
>
> Do all these instructions (smelling specific IE's) are supported by
> other browsers ? and if yes witch ones

They are all W3C specified methods of the HTML table, table section and
table row element interfaces.

  <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425 >

The MSDN stuff also tells you which ones are W3C and those that aren't.

--=20
Rob

RobG a �crit :
> ASM wrote:
<http://msdn.microsoft.com/workshop/author/tables/buildtables.asp>
>> ( createTHead/deleteTHead createTFoot/deleteTFoot
>> createCaption/deleteCaption insertRow/deleteRow	insertCell/deleteCell)
>>
>> Do all these instructions (smelling specific IE's) are supported by
>> other browsers ? and if yes witch ones
> 
> They are all W3C specified methods of the HTML table, table section and
> table row element interfaces.
> 
>   <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425 >

Super !

> The MSDN stuff also tells you which ones are W3C and those that aren't.

I missed that :-(
Saw : list of create/delete
then : long parts of code using   createElement("TR");  and so on
as they would be 2 worlds (independent) IE <-> W3C.