Question involving document.createElement and this

[bayfaulkscatering]

I'm definitely not new to JS, but for the life of me, I can't figure
this one out. Here's basically what I'm doing:

function foo() {
alert(this);
}

span = document.createElement('span');
a = document.createElement('a');
// Code to add text, etc to the tag here...
a.onclick = foo;
span.appendChild(a);
// ... stuff ...
divObject.appendChild(span);

Instead of seeing like [object HTMLElement] or whatever, I simply see
the URL of the page in the alert window. I've also tried adding (e) as
a parameter to foo to capture the event, but with no luck. And I tried
using an anonymous function:

a.onclick = function() { alert(this); }

I was thinking maybe it was just giving me the URL was because the a
object was not appended to anything, ergo belonging to the document,
but it seems like the 'this' reference shouldn't even matter until the
function is called, at which time it is set to the a object. Can anyone
help?

 

[bayfaulkscatering]

Clarification:

I've also tried:

function foo(e) {
alert(e.target);
}
// [REST OF CODE]

and I get the exact same thing.

 

[bayfaulkscatering]

Update:

doing:

function foo(e) {
alert(e.parentNode.id);
}

correctly returns the id of the parent node of the a-link, which is the
span! Now I'm even more confused...

 

[info]

I had a similar situation, if I'm reading your right. See if this
helps any as a replacement to a.onclick.

a.href = "javascript:foo()";

 

[Lasse Reichstein Nielsen]

function foo() {
alert(this);
} ....
a = document.createElement('a');
// Code to add text, etc to the tag here...
a.onclick = foo; ....
Instead of seeing like [object HTMLElement] or whatever, I simply see
the URL of the page in the alert window.

The URL of *which* page? The current or the one being linked to by the
link?

I believe you are seeing a legacy feature. The original browsers
introducing a method to refer to "a" elements (the document.links
collection) predates the W3C standards. They could do whatever
they wanted, and choose to have the toString method of "a" elements
return the href property. Modern browser have kept this feature.

And I tried using an anonymous function:

a.onclick = function() { alert(this); } ....
but it seems like the 'this' reference shouldn't even matter until the
function is called, at which time it is set to the a object.

Correct.

/L

 

[Randy Webb]

(e-mail address removed) said the following on 4/30/2006 11:54 PM:

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

I had a similar situation, if I'm reading your right. See if this
helps any as a replacement to a.onclick.

a.href = "javascript:foo()";

It won't.

<URL: http://jibbering.com/faq/#FAQ4_24>

 

[Thomas 'PointedEars' Lahn]

I'm definitely not new to JS,

I would say you are new to it enough.

but for the life of me, I can't figure
this one out. Here's basically what I'm doing:

function foo() {
alert(this);
}

span = document.createElement('span');

Identifiers should be declared:

var span = ...;

At least methods should be feature-tested:

function isMethod(a)
{
return a && /^\s*(function|object)\s*$/.test(typeof a);
}

if (isMethod(document.createElement))
{
... document.createElement(...) ...
}

a = document.createElement('a');

See above.

// Code to add text, etc to the tag here...
a.onclick = foo;

References should be tested before they are used:

span.appendChild(a);

See above.

// ... stuff ...
divObject.appendChild(span);

See above.

Instead of seeing like [object HTMLElement] or whatever, I simply see
the URL of the page in the alert window.

The reason is that in many DOMs `HTMLAnchorElement' objects (and their Link
equivalents) inherit a toString() method from their prototype that returns
the value of their `href' property (with relative URIs resolved). Since
you have not set that property, it has its default value which is "" which
in turn is a relative URI for the resource where the element is located.
Which is, quite correctly, "the URL of the page", as window.alert()
converts its argument to string.

I've also tried adding (e) as
a parameter to foo to capture the event, but with no luck. And I tried
using an anonymous function:

a.onclick = function() { alert(this); }

As I expected, that does not make any difference. `this' refers to the
calling object (which is the event target with this syntax) and its `href'
property is still the empty string.

There are several possibilities, among them:

- You can use FireBug's Event Inspector
- You can access this.nodeName
- In the Gecko DOM, you can overwrite HTMLAnchorElement.prototype.toString()
(backing it up first) to show any data you find convenient, for example:

HTMLAnchorElement.prototype.toString = function()
{
return '<a href="' + this.href + '">';
}

See also <URL:http://pointedears.de/ObjectInspector?root=HTMLAnchorElement>.


PointedEars

 

[Thomas 'PointedEars' Lahn]

function foo() {
alert(this);
} ...
a = document.createElement('a');
// Code to add text, etc to the tag here...
a.onclick = foo; ...
Instead of seeing like [object HTMLElement] or whatever, I simply see
the URL of the page in the alert window.

The URL of *which* page? The current or the one being linked to by
the link?

I believe you are seeing a legacy feature. The original browsers
introducing a method to refer to "a" elements (the document.links
collection) predates the W3C standards. They could do whatever
they wanted, and choose to have the toString method of "a" elements
return the href property. Modern browser have kept this feature.

While doing research for <I have found out that this feature is in fact standards compliant:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
(scroll down to the bottom)


PointedEars