[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Question about appendChild using series of divs

gcf

2/3/2015 7:24:00 PM

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.

11 Answers

Mouse

7/31/2010 7:38:00 PM

0

[posted and mailed]

"Sweetbac" <sweetbacz@scbglobal.net> wrote in news:i31f1q$f3l$1
@news.eternal-september.org:

>
> <xxx@xxx.com> wrote in message
>
>> Poor sensitive guy, don't sweat it nobody takes you seriously enough to
>> lash out. Try not to get too hurt when people make jokes. For what it is
>> worth I thought you looked very pretty in your photo, way more butch
>> than you act on here. A later day Ethel Merman, almost.
>
> I am too sensitive for this place.
> Now look....get off my back or I'm going to stop posting here!
> Is THAT what you want, Mr xxx?
>
>
>


Perish the thought, If I had known I would never have made those mean
comments.

JJ

2/4/2015 12:10:00 AM

0

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).

Thomas 'PointedEars' Lahn

2/4/2015 1:24:00 PM

0

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Tim Streater

2/4/2015 1:35:00 PM

0

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/f...

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

Thomas 'PointedEars' Lahn

2/4/2015 2:13:00 PM

0

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

gcf

2/5/2015 5:59:00 PM

0

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.

gcf

2/5/2015 6:03:00 PM

0

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.

Thomas 'PointedEars' Lahn

2/5/2015 6:21:00 PM

0

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

John Harris

2/5/2015 7:37:00 PM

0

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

Thomas 'PointedEars' Lahn

2/7/2015 11:07:00 AM

0

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.