Question involving document.createElement and this

Discussion in 'Javascript' started by bayfaulkscatering@gmail.com, May 1, 2006.

  1. Guest

    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?
    , May 1, 2006
    #1
    1. Advertising

  2. Guest

    Clarification:

    I've also tried:

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

    and I get the exact same thing.
    , May 1, 2006
    #2
    1. Advertising

  3. Guest

    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...
    , May 1, 2006
    #3
  4. Guest

    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()";
    , May 1, 2006
    #4
  5. writes:

    > 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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, May 1, 2006
    #5
  6. Randy Webb Guest

    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.
    <URL: http://www.safalra.com/special/googlegroupsreply/ >

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

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 1, 2006
    #6
  7. wrote:

    > 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:

    <URL:http://pointedears.de/scripts/test/whatami#inference>

    > 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
    --
    Germany is the birth place of psychiatry. Psychs feel threatened by
    Scientology as they are crazy. Many psychs become psychs to heal their own
    mental problems and to control others. -- "The only real Barbara Schwarz",
    dsw.scientology, <>
    Thomas 'PointedEars' Lahn, May 10, 2006
    #7
  8. Lasse Reichstein Nielsen wrote:

    > writes:
    >> 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 <news:>,
    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
    --
    Let us not judge others because of their religion, color or nationality.
    We are all just human beings living together on this planet. (poehoe.de)
    Thomas 'PointedEars' Lahn, May 16, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Weston C

    document.createElement('a') doesn't work?

    Weston C, Jan 9, 2004, in forum: Javascript
    Replies:
    4
    Views:
    99
    Michael Hill
    Jan 9, 2004
  2. Pieter Van Waeyenberge

    'wrap' inconsistency? createElement VS document.write

    Pieter Van Waeyenberge, Feb 9, 2004, in forum: Javascript
    Replies:
    3
    Views:
    173
    Pieter Van Waeyenberge
    Feb 11, 2004
  3. oeyvind toft

    document.createElement

    oeyvind toft, Sep 4, 2004, in forum: Javascript
    Replies:
    4
    Views:
    134
    Michael Winter
    Sep 5, 2004
  4. Andrew Poulos

    IE5 and document.createElement

    Andrew Poulos, Dec 6, 2004, in forum: Javascript
    Replies:
    2
    Views:
    102
    Andrew Poulos
    Dec 6, 2004
  5. James Black
    Replies:
    10
    Views:
    273
    Thomas 'PointedEars' Lahn
    May 25, 2006
Loading...

Share This Page