Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #13852

Re: Appending a TABLE to a DIV

Followups directed to: comp.lang.javascript

Show all headers | View raw

Richard Cornford wrote:

> Richard Maher wrote:
>> Can someone please tell me why, in the code below, can I see the
>> table when I append it to the document.body but not the DIV(wire)?
>>
>> That is: -
>>      wire.appendChild(decal);       // shows a ghost of the table
>>      document.body.appendChild(decal);  // shows the whole table
>>
>> Cheers Richard Maher
>>
>> <html>

The required `DOCTYPE' declaration (HTML 4.01, XHTML) or HTML5 doctype is 
missing.

>> <head>
>>    <script language="javascript">

The `type' attribute, which is required in HTML 4.01, XHTML 1.0 Strict and 
XHTML 1.1, is missing.  The `language' attribute ranges from being 
deprecated (HTML 4.01 Transitional, XHTML 1.0 Transitional) to invalid
(HTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1, HTML5 WD).

Documents that are likely to be downloaded as a file should also include a 
declaration of the character encoding used in the document, as not all 
applications can automatically add that declaration.

<http://validator.w3.org/>

>> function load(){

It is probably a good idea to avoid function names that are identical with 
DOM event types, such as `load'.

>>     var flyScreen = function() {
>>         var OPACITY = 25;
>               ^^^^^^^   ^^
>>         var wire = document.createElement('div');
> <snip>
>>         wire.style.opacity=(OPACITY / 100);
>                      ^^^^^^^
>>         wire.style.MozOpacity=(OPACITY / 100);
>                         ^^^^^^^
>>         wire.style.filter='alpha(opacity='+OPACITY+')';
>                                    ^^^^^^^
> <snip>
> 
> If you set the opacity of the DIV to 25% of opaque then it, and all of
> the elements it contains (are appended to it, or its decedents) will be
> 75% transparent. That seems sufficient to explain the most literal
> interpretation of "ghost of the table".

ISTM that the main issue here is that the OP is not aware that the same  
node cannot be appended as the child node of two different parent nodes.  

Subsequent calls of appendChild() with the same argument value will – 
effectively – move the node referred by the argument from the previous 
parent node to the target node (which is can be made part of an efficient 
approach to sort a table).

The best solution for this problem is to create a new node object using the 
cloneNode() method as provided by the Node interface, and append that new 
node to the other parent node instead:

  wire.appendChild(decal);
  document.body.appendChild(decal.cloneNode(true));

See also: <http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107>


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Appending a TABLE to a DIV "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-05-06 18:42 +0800
  Re: Appending a TABLE to a DIV Mr Ruaraidh Petrie <me@sorry_no_spam> - 2012-05-06 18:29 +0100
    Re: Appending a TABLE to a DIV "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-05-07 05:55 +0800
      Re: Appending a TABLE to a DIV Mr Ruaraidh Petrie <me@sorry_no_spam> - 2012-05-10 21:29 +0100
  Re: Appending a TABLE to a DIV "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-05-06 20:08 +0100
    Re: Appending a TABLE to a DIV "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-05-07 06:00 +0800
      Re: Appending a TABLE to a DIV "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-05-07 13:52 +0100
        Re: Appending a TABLE to a DIV "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-05-07 21:31 +0800
          Re: Appending a TABLE to a DIV "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-05-07 19:58 +0100
    Re: Appending a TABLE to a DIV Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-05-07 21:57 +0200
  Re: Appending a TABLE to a DIV Andrew Poulos <ap_prog@hotmail.com> - 2012-05-07 13:41 +1000
  Re: Appending a TABLE to a DIV "Leonardo Azpurua" <leonardo@exmvps.org> - 2012-05-07 08:17 -0430
    Re: Appending a TABLE to a DIV "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-05-07 21:34 +0800

csiph-web