How to add an image to divisions without IDs

[Stefan Mueller]

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?

 

[Thomas 'PointedEars' Lahn]

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

<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

 

[Stefan Mueller]

  var image = document.createElement("img");

  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

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

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

 

[Thomas 'PointedEars' Lahn]

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

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

 

[Stefan Mueller]

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.

 

[Thomas 'PointedEars' Lahn]

[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