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

Groups > comp.lang.javascript > #26784 > unrolled thread

Question about appendChild using series of divs

Back to article view | Back to comp.lang.javascript

Contents

  Question about appendChild using series of divs gcf@panix.com (Gordon) - 2015-02-03 14:24 -0500
    Re: Question about appendChild using series of divs JJ <jj4public@vfemail.net> - 2015-02-04 07:10 +0700
      Re: Question about appendChild using series of divs gcf@panix.com (Gordon) - 2015-02-05 18:02 +0000
    Re: Question about appendChild using series of divs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-04 14:23 +0100
      Re: Question about appendChild using series of divs Tim Streater <timstreater@greenbee.net> - 2015-02-04 13:34 +0000
        Re: Question about appendChild using series of divs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-04 15:12 +0100
      Re: Question about appendChild using series of divs gcf@panix.com (Gordon) - 2015-02-05 17:59 +0000
        Re: Question about appendChild using series of divs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-05 19:21 +0100
          Re: Question about appendChild using series of divs John Harris <niam@jghnorth.org.uk.invalid> - 2015-02-05 19:36 +0000
            Re: Question about appendChild using series of divs Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-07 12:07 +0100
              Re: Question about appendChild using series of divs John Harris <niam@jghnorth.org.uk.invalid> - 2015-02-07 15:20 +0000

#26784 — Question about appendChild using series of divs

Context: I am using the most recent Firefox browser
on a Linux (Ubuntu 14.04) box.  I am constructing a
page where, when the user clicks on a picture, 
related pictures appear under it, pushing subsequent
material down.

I have a div which I will call 'H' (for header).  
After this div, I use javascript to create and
append five divs, based on data in an object in
the program.  Each new div contains a picture and
some text.  Each of these div has a unique ID,
let us say 'A', 'B', 'C', 'D', 'E'.  In all five
cases I use appendChild to attach the div to the
'H' div.  The divs then display in the same order.
(I would think they would display in reverse order,
since they are being successively appended to 'H', not
to the last appended, but they don't.)  This action is
performed automatically when the page is first loaded,
so we observe 'H', 'A', ... ,'E', ... in the browser.

While the page is up, if the user clicks on a link within
one of the five divs, say 'C', another set of divs is similarly
created, let us say 'c1', 'c2', 'c3', ....  These I append
to div 'C'.  I want them to appear below 'C' and before 'D',
but instead they display below 'E'.

My questions are (1) Why, if appending after 'H' works
as I expect, don't the other appendChild calls? and 
(2) How can I get the result I want?  Note: I don't 
want to do the work of locating these items on the
page by numerical coordinates, I want the browser to 
do that work, so the divs will respond to possible
changes in the size for foregoing material.  If
possible.

Thanks for any help or suggestions you can give.

[toc] | [next] | [standalone]

#26786

On 3 Feb 2015 14:24:13 -0500, Gordon wrote:
> 
> While the page is up, if the user clicks on a link within
> one of the five divs, say 'C', another set of divs is similarly
> created, let us say 'c1', 'c2', 'c3', ....  These I append
> to div 'C'.  I want them to appear below 'C' and before 'D',
> but instead they display below 'E'.

Check the DOM tree to make sure they're appended into the correct element.
If everything is fine, then the problem is due to CSS/formatting issue. e.g.
elements got wrapped due to fixed container width.

> My questions are (1) Why, if appending after 'H' works
> as I expect, don't the other appendChild calls? and 

That really depends on the code that isn't provided. You should at least
debug your code and check the DOM tree after appendChild() function calls.

> (2) How can I get the result I want?  Note: I don't 
> want to do the work of locating these items on the
> page by numerical coordinates, I want the browser to 
> do that work, so the divs will respond to possible
> changes in the size for foregoing material.  If
> possible.

For Firefox, use the DOM Inspector (CTRL+SHIFT+I) or use the one from the
Firebug addon (recommended).

[toc] | [prev] | [next] | [standalone]

#26805

JJ <jj4public@vfemail.net>:
> On 3 Feb 2015 14:24:13 -0500, Gordon wrote:
> > 
> > While the page is up, if the user clicks on a link within
> > one of the five divs, say 'C', another set of divs is similarly
> > created, let us say 'c1', 'c2', 'c3', ....  These I append
> > to div 'C'.  I want them to appear below 'C' and before 'D',
> > but instead they display below 'E'.
> 
> Check the DOM tree to make sure they're appended into the correct element.
> If everything is fine, then the problem is due to CSS/formatting issue. e.g.
> elements got wrapped due to fixed container width.
> 
> > My questions are (1) Why, if appending after 'H' works
> > as I expect, don't the other appendChild calls? and 
> 
> That really depends on the code that isn't provided. You should at least
> debug your code and check the DOM tree after appendChild() function calls.
> 
> > (2) How can I get the result I want?  Note: I don't 
> > want to do the work of locating these items on the
> > page by numerical coordinates, I want the browser to 
> > do that work, so the divs will respond to possible
> > changes in the size for foregoing material.  If
> > possible.
> 
> For Firefox, use the DOM Inspector (CTRL+SHIFT+I) or use the one from the
> Firebug addon (recommended).



Thanks.  I mainly wanted to check my assumptions about the
correspondence of the order of the divs in the display and
the structure of the DOM tree.

[toc] | [prev] | [next] | [standalone]

#26790

Gordon wrote:
^^^^^^
Please use your full (real) name.

> Context: I am using the most recent Firefox browser
> on a Linux (Ubuntu 14.04) box.  I am constructing a
> page where, when the user clicks on a picture,
> related pictures appear under it, pushing subsequent
> material down.

The proper term is “document”, not “page”.

> […]  In all five cases I use appendChild to attach the div
> to the 'H' div.  The divs then display in the same order.
> (I would think they would display in reverse order,

Unfounded.

> since they are being successively appended to 'H', not
> to the last appended, but they don't.)

“Append” means “to insert at the end” (cf. “prepend”).

> While the page is up, if the user clicks on a link within
> one of the five divs, say 'C', another set of divs is similarly
> created, let us say 'c1', 'c2', 'c3', ....  These I append
> to div 'C'.  I want them to appear below 'C' and before 'D',
> but instead they display below 'E'.

You must have appended them to 'H' instead.

> My questions are (1) Why, if appending after 'H' works
> as I expect, don't the other appendChild calls?

Impossible to say, all crystal balls are under repair.
But this Magic 8-ball here says: “Concentrate and ask again”.

> and
> (2) How can I get the result I want?

Well, you *could* try running three magic rounds around the larch at 
midnight when the moon is full.

> Note: I don't want to do the work of locating these items on the
> page by numerical coordinates, I want the browser to
> do that work, so the divs will respond to possible
> changes in the size for foregoing material.  If
> possible.

The browser will do the right thing if you tell it right.

> Thanks for any help or suggestions you can give.

  Talk is cheap. Show me the code.
    —Linus Torvalds

See also the FAQ.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26791

In article <20656658.1E4ZlvUoOU@PointedEars.de>, Thomas 'PointedEars'
Lahn <PointedEars@web.de> wrote:

>Gordon wrote:
>^^^^^^
>Please use your full (real) name.

And it's helpful if you arrange for your usenet client to provide a
complete attribution as mine does. PointyHead will no doubt have a rant
about that but he may safely be ignored.

[snip]

>> My questions are (1) Why, if appending after 'H' works
>> as I expect, don't the other appendChild calls?
>
>Impossible to say, all crystal balls are under repair.
>But this Magic 8-ball here says: “Concentrate and ask again”.

Another useful reply from PointyHead.

This reference:

  http://netweaver.com.au/floatHouse/

may be of some help to see what <div>s do.

-- 
"Please stop telling us what you feel. Please stop telling us what your 
intuition is. Your intuitive feelings are of no interest whatsoever, 
and nor are mine. I don't give a bugger what you feel, or what I feel. 
I want to know what the evidence shows."             -- Richard Dawkins

[toc] | [prev] | [next] | [standalone]

#26792

Tim Streater wrote:

> In article <20656658.1E4ZlvUoOU@PointedEars.de>, Thomas 'PointedEars'
> Lahn <PointedEars@web.de> wrote:
> 
>>Gordon wrote:
>>^^^^^^
>>Please use your full (real) name.
> 
> And it's helpful if you arrange for your usenet client to provide a
> complete attribution as mine does.

It is not helpful, it is distracting the reader from the content at no 
actual advantage.  The more lines they take, the more quotation levels there 
are, the more distracting and wasteful such attribution novels become.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26804

Thomas 'PointedEars' Lahn <cljs@PointedEars.de>:
> Gordon wrote:
> ^^^^^^
> Please use your full (real) name.
> 
> > Context: I am using the most recent Firefox browser
> > on a Linux (Ubuntu 14.04) box.  I am constructing a
> > page where, when the user clicks on a picture,
> > related pictures appear under it, pushing subsequent
> > material down.
> 
> The proper term is “document”, not “page”.
> 
> > […]  In all five cases I use appendChild to attach the div
> > to the 'H' div.  The divs then display in the same order.
> > (I would think they would display in reverse order,
> 
> Unfounded.
> 
> > since they are being successively appended to 'H', not
> > to the last appended, but they don't.)
> 
> “Append” means “to insert at the end” (cf. “prepend”).

It depends on what 'append' means in this particular
context.  If we consider H as a node in a graph
...-H-... and appending A to H results in ...-H-A-...,
one might think subsequently appending B to H might
be expected to result in ...-H-B-A-..., B being placed 
directly after H.  But obviously other interpretations
are possible.  (Here I am conflating assumptions
about the way the append takes place and the way
the result is subsequently displayed.)

> > While the page is up, if the user clicks on a link within
> > one of the five divs, say 'C', another set of divs is similarly
> > created, let us say 'c1', 'c2', 'c3', ....  These I append
> > to div 'C'.  I want them to appear below 'C' and before 'D',
> > but instead they display below 'E'.
> 
> You must have appended them to 'H' instead.

So you seem to agree with my assumption above, that
the layout procedure reads the tree such that if I have appended
c1 to C, then I ought to observe the divs in the 
order H, A, B, C, c1, c2, ..., cn, D, ....  (For space
reasons the content of the divs will appear vertically,
and inserted material should push the material after it
in the tree downward.  Hopefully.)

Historically, the makers of browsers and script
interpreters do not seem to have felt any obligation
to do things in any particular way, so for all I know
my assumption of depth-first left-to-right searching
or whatever it is could be indeed completely
unfounded in some cases.  Hence my approach to this
temple of learning, wisdom, and practical experience.

> 
> > My questions are (1) Why, if appending after 'H' works
> > as I expect, don't the other appendChild calls?
> 
> Impossible to say, all crystal balls are under repair.
> But this Magic 8-ball here says: “Concentrate and ask again”.
> 
> > and
> > (2) How can I get the result I want?
> 
> Well, you *could* try running three magic rounds around the larch at 
> midnight when the moon is full.
> 
> > Note: I don't want to do the work of locating these items on the
> > page by numerical coordinates, I want the browser to
> > do that work, so the divs will respond to possible
> > changes in the size for foregoing material.  If
> > possible.
> 
> The browser will do the right thing if you tell it right.

Well, that's the problem.

> > Thanks for any help or suggestions you can give.
> 
>   Talk is cheap. Show me the code.
>     —Linus Torvalds
> 
> See also the FAQ.

There is a lot of other material in the code, making it
difficult to read as-is.  If the problem persists I will
prepare a stripped-down version of it and post that.

Thanks for your help.

[toc] | [prev] | [next] | [standalone]

#26806

Gordon wrote:
^^^^^^
Again, this is Usenet; please use your full (real) name.

> Thomas 'PointedEars' Lahn <cljs@PointedEars.de>:
>> Gordon wrote:
>> > […]  In all five cases I use appendChild to attach the div
>> > to the 'H' div.  The divs then display in the same order.
>> > (I would think they would display in reverse order,
>> 
>> Unfounded.
>> 
>> > since they are being successively appended to 'H', not
>> > to the last appended, but they don't.)
>> 
>> “Append” means “to insert at the end” (cf. “prepend”).
> 
> It depends on what 'append' means in this particular
> context.

Yes.  But I think “to append a *child* (node)” is without ambiguity.

> If we consider H as a node in a graph
> ...-H-... and appending A to H results in ...-H-A-...,
> one might think subsequently appending B to H might
> be expected to result in ...-H-B-A-..., B being placed
> directly after H.  But obviously other interpretations
> are possible.  (Here I am conflating assumptions
> about the way the append takes place and the way
> the result is subsequently displayed.)

You need to consider this not as a linear graph, but a document *tree* of 
nodes:

  H
  :-- A
  :-- B
  :-- C
  '-- D

Hence append*Child*.

>> > While the page is up, if the user clicks on a link within
>> > one of the five divs, say 'C', another set of divs is similarly
>> > created, let us say 'c1', 'c2', 'c3', ....  These I append
>> > to div 'C'.  I want them to appear below 'C' and before 'D',
>> > but instead they display below 'E'.
>> 
>> You must have appended them to 'H' instead.
> 
> So you seem to agree with my assumption above, that
> the layout procedure reads the tree such that if I have appended
> c1 to C, then I ought to observe the divs in the
> order H, A, B, C, c1, c2, ..., cn, D, .... 

No, if properly done, the elements are *nested* thus:

  H
  :-- A
  :-- B
  :-- C
  :   :-- c1
  :   :-- c2
  :   :-- ...
  :   '-- cn
  '-- D

But apparently you did:

  H
  :-- A
  :-- B
  :-- C
  :-- D
  :-- c1
  :-- c2
  :-- ...
  '-- cn

That is, if the order is not as you expected, either you appended the 
elements to the wrong parent node, or a stylesheet (which can change the 
positioning of elements in the viewport regardless of source code/node 
order) interferes.

> (For space
> reasons the content of the divs will appear vertically,
> and inserted material should push the material after it
> in the tree downward.  Hopefully.)
> 
> Historically, the makers of browsers and script
> interpreters do not seem to have felt any obligation
> to do things in any particular way, […]

You are mistaken.  Ex falso quodlibet.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26808

On Thu, 05 Feb 2015 19:21:20 +0100, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

>Gordon wrote:
>^^^^^^
>Again, this is Usenet; please use your full (real) name.
  <snip>

But no-one knows why you should. Perhaps it's the law for all the de.*
newsgroups.

As for 'real name', in English law your name is whatever you can
persuade people to call you, and it can be different for different
people, as I've pointed out before.

  John

[toc] | [prev] | [next] | [standalone]

#26814

John Harris wrote:

> […] Thomas 'PointedEars' Lahn […] wrote:
>> Gordon wrote:
>> ^^^^^^
>> Again, this is Usenet; please use your full (real) name.
> 
> But no-one knows why you should. 

No, *you* do not know.

JFYI: It creates confidence and reduces the potential for confusion.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26815

On Sat, 07 Feb 2015 12:07:23 +0100, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

>John Harris wrote:
>
>> […] Thomas 'PointedEars' Lahn […] wrote:
>>> Gordon wrote:
>>> ^^^^^^
>>> Again, this is Usenet; please use your full (real) name.
>> 
>> But no-one knows why you should. 
>
>No, *you* do not know.
>
>JFYI: It creates confidence and reduces the potential for confusion.

If VK used a longer name would that create more confidence? No it
wouldn't!

There has been no confusion in this news group in the last 10 years.

JFYI: Forged quotes are a much more serious matter.

  John

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web