How to add an image to divisions without IDs

Discussion in 'Javascript' started by Stefan Mueller, Dec 20, 2009.

  1. I've a table with several columns. The header row of the table looks
    like
    <th class = "style_table">
    <div class = "style_column">
    Header of Column 1
    </div>
    </th>

    <th class = "style_table">
    <div class = "style_column">
    Header of Column 2
    </div>
    </th>

    ...

    Now I'd like to add to each header an image.

    If I do it with
    var image = document.createElement("img");
    image.setAttribute("src", "myimage.gif");
    this.appendChild(image);
    the header of each column looks like
    <th class = "style_table">
    <div class = "style_column">
    Header of Column 1
    </div>
    <img src = "myimage.gif">
    </th>

    But I'd like to have '<img src = "myimage.gif">' within the divisions:
    <th class = "style_table">
    <div class = "style_column">
    Header of Column 1
    <img src = "myimage.gif">
    </div>
    </th>

    I know that I can do this if I add to each division an ID. But is
    there also a way to do it without using IDs?
    Stefan Mueller, Dec 20, 2009
    #1
    1. Advertising

  2. Stefan Mueller wrote:

    > I've a table with several columns. The header row of the table looks
    > like
    > <th class = "style_table">
    > <div class = "style_column">
    > Header of Column 1
    > </div>
    > </th>
    >
    > <th class = "style_table">
    > <div class = "style_column">
    > Header of Column 2
    > </div>
    > </th>
    >
    > ...
    >
    > Now I'd like to add to each header an image.
    >
    > If I do it with
    > var image = document.createElement("img");
    > image.setAttribute("src", "myimage.gif");


    image.src = "myimage.gif";

    > this.appendChild(image);
    > the header of each column looks like


    No, it most certainly does not. First, because `this' refers to the Global
    Object or whatever the `this' value refers to in your case (depends on the
    execution context) when it should have referred to the element object that
    you want to add the element to (and you do not want to try augmenting a host
    object so that `this' refers to it). Second:

    > <th class = "style_table">
    > <div class = "style_column">
    > Header of Column 1
    > </div>
    > <img src = "myimage.gif">


    The whitespace before the `img' element is parsed into a white-space text
    node (except in MSHTML where it may be discarded). You have not added such
    a text node, so the actual serialization of the document subtree would be

    <div class="style_column">
    Header of Column 1
    </div><img src="myimage.gif">

    BTW: It is uncommon, therefore potentially confusing and error-prone to put
    whitespace around the `=' in the markup.

    > </th>
    >
    > But I'd like to have '<img src = "myimage.gif">' within the divisions:


    No, you don't. The element lacks an `alt' attribute specification and would
    therefore be not Valid. <http://validator.w3.org/>

    > <th class = "style_table">
    > <div class = "style_column">
    > Header of Column 1
    > <img src = "myimage.gif">
    > </div>
    > </th>


    What do you think you need the `div' element for anyway?

    > I know that I can do this if I add to each division an ID. But is
    > there also a way to do it without using IDs?


    Yes, several. Since the element has a `class' attribute specified, you
    could traverse the document subtree for that. Or you could find the `div'
    element that is the descendant element of the `th' element.

    Anyhow, since this is your sixth question in a row that speaks of an utter
    lack of minumum clue, I wonder, though, if and when you will be realizing
    that this poking around in the dark is not going to get you anywhere near a
    satisfying Web development experience. One does not get to be a successful
    and responsible Web developer without RTFFAQ, RTFM, and STFW as one does not
    get to be a car driver without a driver's license.

    <http://jibbering.com/faq/#posting>


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Dec 20, 2009
    #2
    1. Advertising

  3. > >   var image = document.createElement("img");
    > >   image.setAttribute("src", "myimage.gif");

    >   image.src = "myimage.gif";


    Thanks for this advise. Looks much smarter.


    > No, it most certainly does not.  First, because `this' refers to the Global
    > Object or whatever the `this' value refers to in your case (depends on the
    > execution context) when it should have referred to the element object that
    > you want to add the element to (and you do not want to try augmenting a host
    > object so that `this' refers to it).


    'this' refers in my case to '<th class = "style_table">' because
    alert(this.className);
    displays 'style_table'.

    Actually I was hoping that there would be a way to refer to the first
    division within <th></th> without using IDs (e.g. this.div(0)).


    > What do you think you need the `div' element for anyway?

    Because I need to assign a class to <th> and to <div>.
    Stefan Mueller, Dec 20, 2009
    #3
  4. Stefan Mueller wrote:

    > [Thomas 'PointedEars' Lahn wrote:]
    >> No, it most certainly does not. First, because `this' refers to the
    >> Global Object or whatever the `this' value refers to in your case
    >> (depends on the execution context) when it should have referred to the
    >> element object that you want to add the element to (and you do not want
    >> to try augmenting a host object so that `this' refers to it).

    >
    > 'this' refers in my case to '<th class = "style_table">' because
    > alert(this.className);
    > displays 'style_table'.


    How so?

    > Actually I was hoping that there would be a way to refer to the first
    > division within <th></th> without using IDs (e.g. this.div(0)).


    There is. You can either use thRef.getElementsByTagName("div")[0], or XPath
    where available. RTFM.

    >> What do you think you need the `div' element for anyway?

    > Because I need to assign a class to <th> and to <div>.


    Why?


    Please leave in the attribution lines and enough of the context for the
    quotation to make sense.

    See also <http://jibbering.com/faq/#posting> pp.


    PointedEars
    --
    Danny Goodman's books are out of date and teach practices that are
    positively harmful for cross-browser scripting.
    -- Richard Cornford, cljs, <cife6q$253$1$> (2004)
    Thomas 'PointedEars' Lahn, Dec 20, 2009
    #4
  5. > > Actually I was hoping that there would be a way to refer to the first
    > > division within <th></th> without using IDs (e.g. this.div(0)).

    >
    > There is.  You can either use thRef.getElementsByTagName("div")[0], or XPath
    > where available.


    Great, that's what I was looking for. Many thanks.
    Stefan Mueller, Dec 21, 2009
    #5
  6. Stefan Mueller wrote:

    > [Thomas 'PointedEars' Lahn wrote:]
    >> > Actually I was hoping that there would be a way to refer to the first
    >> > division within <th></th> without using IDs (e.g. this.div(0)).

    >>
    >> There is. You can either use thRef.getElementsByTagName("div")[0], or
    >> XPath where available.

    >
    > Great, that's what I was looking for. Many thanks.


    You probably do not need the `div' element anyway.

    And, for the last time, DO NOT remove the attribution lines!


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Dec 21, 2009
    #6
    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. time waster
    Replies:
    5
    Views:
    776
    informant
    Nov 17, 2003
  2. Dennis M. Marks

    Positioning Divisions with CSS

    Dennis M. Marks, Dec 10, 2003, in forum: HTML
    Replies:
    1
    Views:
    560
    Terry Joyce
    Dec 10, 2003
  3. Richard
    Replies:
    3
    Views:
    394
    Richard
    Jan 10, 2004
  4. Richard
    Replies:
    5
    Views:
    467
    rblah
    Jan 17, 2004
  5. Replies:
    2
    Views:
    690
    Beat Bolli
    Jun 21, 2005
Loading...

Share This Page