using variables when manipulating the dom

[jk]

Is it alright to ask general questions about javascript here?
I'm trying to understand the mental model(s) of the dom.
I'm experimenting with adding and removing elements from the page.
I got this to work:

` function addParagraph() {
` var newP = document.createElement("p");
` var newT = document.createTextNode("hello, world!");
` newP.appendChild(newT);
` document.getElementsByTagName('body')[0].appendChild(newP);
` }

my question is, if the above works, why doesn't this?
(replaced variable `newP`):

` function addParagraph() {
` var newT = document.createTextNode("hello, world!");
` document.createElement("p").appendChild(newT);
` document.getElementsByTagName('body')[0].appendChild(newP);
` }

What's at work here? does the variable capture something being passed
from the method?
why can't I use appendChild and createElement within the same
statement? I guess I thought that variables were mostly a shortcut, so
it seemed to me you COULD write the above example in one line, without
variables. (note: I can subsitute the var `newT` in the sample above
with no issues.)

admittedly, my knowledge of javascript is slim, but I find it hard to
learn it without also understanding its application to the dom. the
tutorials at w3schools.com are so dated.

[Tobias - http://tbGTD.tiddlyspot.com]

You found it, right? If not, the problem is your very last newP.

[shavinder]

As Toby said you are trying to add a variable/element (newP) which
does not exist in the last line. try this:
document.getElementsByTagName('body')[0].appendChild
(document.createElement("p").appendChild(document.createTextNode
("helloWorld")));

-shavinder

[jk]

fair enough, but the one-liner version still does not work correctly.
if I don't capture the createElement method first in a variable, it
will append the only the text to the body.
compare the difference:

http://jksjs.s3.amazonaws.com/ce1.html and
http://jksjs.s3.amazonaws.com/ce2.html

[Tobias - http://tbGTD.tiddlyspot.com]

Hi jk,

May I suggest you moved on and consider any of [1], e.g.:

jQuery(someDomNode).append('<p>Hello world</p>');

jQuery(".someCssClass").append('<p>Hello world</p>');
-> adds to all of this class

jQuery(".someCssClass:first").append('<p>Hello world</p>');
-> adds to first element of this class

jQuery("#someId").append('<p>Hello world</p>');
-> adds to element with that id


[1]http://docs.jquery.com/Core

Tobias.

[FND]

> May I suggest you moved on and consider [using jQuery]

I believe one should have a firm grasp of JavaScript and the DOM before
using abstractions like jQuery. (Although that's not necessarily a
strictly linear progression; experimenting with jQuery can be
educational WRT the underlying technologies.)

> the one-liner version still does not work correctly

This is because your code returns the last element in the chain rather
than the original node:
document.createElement("p");
// returns p element

document.createElement("p").
appendChild(
document.createElement("em")
);
// returns em element

document.createElement("p").
appendChild(
document.createTextNode("helloWorld")
);
// returns text node

> http://jksjs.s3.amazonaws.com/ce1.html and
> http://jksjs.s3.amazonaws.com/ce2.html

I assume you're aware that these are not valid HTML4 documents?
(It looks a little like HTML5, but that might be coincidental?)

-- F.

[shavinder]

Wow FND! I could have never guessed. Thanks!

Its here too at https://developer.mozilla.org/En/DOM/Node.appendChild:


var appendedElement = element.appendChild(child);

The returned element is the child which is *appended*. So this line
does NOT return element "p", it returns the helloworld textnode.

document.createElement("p").appendChild(document.createTextNode
("helloWorld"))

Is the element "p" being created? I would hazard a guess that it *is*
being created. But in the following line the element p is not appended
to the body but is left orphan, and the returned appended child text
node goes on further to be appended to the body element in this line:

document.getElementsByTagName('body')[0].appendChild
(document.createElement("p").appendChild(document.createTextNode
("helloWorld")));

The next logical question is what does the above line return? The
helloworld Textnode still!

Thanks to FND for this again.

-shavinder

[FND]

> Is the element "p" being created? I would hazard a guess that it *is*
> being created. But in the following line the element p is not appended
> to the body but is left orphan

It is being created in-memory, but does not persist in the document.
Thus the object's memory will be deallocated (freed) when it goes out of
scope, i.e. the function ends - though that might depend on the
respective JavaScript engine's garbage collection. (I'm not an expert on
such low-level details.)

Note that jQuery's chaining can work a little different, depending on
which method is invoked.

-- F.

[jk]

Trying hard to grasp this.

So the element IS being created in memory, but is not getting a child
element appended to it?

I don't understand why these two aren't identical:

ex. 1:
` newP = document.createElement("p");
` newP.appendChild(document.createTextNode("hello, world!"));

ex. 2:
` document.createElement("p").appendChild(document.createTextNode
("hello, world!"));

If the first example works, why can't I substitue the variable with
it's original value (example 2)?

Does it have to do with objects? (I'm not familiar with object-
oriented programming)

If it does, than what is the variable? A reference to an object stored
in memory?
Are variables required to work with objects in memory?

> I assume you're aware that these are not valid HTML4 documents?
> (It looks a little like HTML5, but that might be coincidental?)

coincidental? no. valid? well, sure:
http://html5.validator.nu/?doc=http%3A%2F%2Fjksjs.s3.amazonaws.com%2Fce1.html&showsource=yes
atleast, it works.

(Thank you all for replying.)

[jk]

before this thread fades away into obscurity, can someone answer me
these questions?? ;)

[FND]

> I don't understand why these two aren't identical:
> ex. 1:
> ` newP = document.createElement("p");
> ` newP.appendChild(document.createTextNode("hello, world!"));
> ex. 2:
> ` document.createElement("p").appendChild(document.createTextNode
> ("hello, world!"));

Both create a P element with a text node ("<p>hello, world!</p>").
However, that element is never appended to the document.

You might wanna read through some of the articles listed here:
http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc

-- F.

[jk]

I understand what's happening but what I want to know is why. Because
I expect it work one way, and it works another. Therefore, if I can
understand the underlying concept, I won't assume a logical conclusion
that is incompatible with javascript (because there is surely a
difference in mental model between javascript and the other languages
I've used). I can and will study information and tutorials available
about javascript, BUT, I always try to do something useful with what
I'm learning early on, as I can retain it better. But useful stuff
often builds upon an complete understanding of the subject. The
problem with only reading the documentation or current tutorials is
the bleeding edge is always changing the paradigm. Don't you think
javascript programming is changing rapidly with the advent of html5?
(or rather, is javascript changing html?) Also I want to make
unobtrusive javascript code, but the tutorials and beginner
information is usually old and obtrusive examples. (the better stuff
is more conceptual and less likely to be demonstrated to a beginner
audience).

/rhetoric rant

Bottom line, what I'm asking is, I know the two work differently-- but
_why_. is this because of objects? I'm used to thinking that using a
variable is only a "shortcut", it just functions the same as the text
that it was defined with. (does that make sense?)

` newP = document.createElement("p");

Is newP a variable, an object, or both? Is this because it's a
different variable *type*?

Is this behavior part of object-oriented programming (my experience in
programming is limited to basc perl/cgi--therefore my understanding of
variables is different/limited)

I just want to conceptualize javascript code in the "correct" (or most
productive) mindset... And I want to apply javascript to what I
already understand. Does that clarify my intentions?? (sorry for
sounding overly zealous)