Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Best method to add HTML dynamically

Reply
Thread Tools

Best method to add HTML dynamically

 
 
listerofsmeg01@hotmail.com
Guest
Posts: n/a
 
      10-22-2006
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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-22-2006
Randy Webb wrote:
> 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-HTM...ml#ID-39872903 >
<URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-68927016 >

--
Rob

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      10-23-2006
RobG a écrit :
>
> <URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-39872903 >
> <URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-68927016 >


what does mean 'IDL' in 'IDL definition' ?
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      10-23-2006
ASM wrote:
> RobG a écrit :
> >
> > <URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-39872903 >
> > <URL: http://www.w3.org/TR/DOM-Level-2-HTM...ml#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/definit...212314,00.html >


--
Rob

 
Reply With Quote
 
listerofsmeg01@hotmail.com
Guest
Posts: n/a
 
      10-23-2006

> 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

 
Reply With Quote
 
J R Stockton
Guest
Posts: n/a
 
      10-23-2006
In message <>, Sun, 22 Oct 2006
19:01:08, Randy Webb <> writes
> 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.
 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      10-23-2006
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.mori...nerHTML_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
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      10-23-2006

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.

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      10-23-2006
Andy Dingley <> 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
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      10-23-2006
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/a.../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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
where's the best place to dynamically add singleton method? Iain Barnett Ruby 4 05-07-2011 12:29 PM
How do I add method dynamically to module using C API? Alf P. Steinbach /Usenet Python 4 07-08-2010 08:48 AM
add method to class dynamically? Neal Becker Python 3 10-22-2008 01:23 PM
Dynamically add a method to a TestCase Achim Domma Ruby 4 01-03-2008 02:53 AM
Dynamically add class method causes "SystemError: ... bad argument to internal function" Newgene Python 1 01-13-2005 02:54 AM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57