set background image to newly created DOM element

**jjcox** · 01-26-2011 01:05 PM

I am trying to dynamically create child elements and add a background image before appending it to the parent node. Everything is working except for the image files actually appearing. When you inspect the element in Mozilla, it reveals that the li elements have all been created and attached, and even contain the "style" attribute. I am certain it is my reference to the image array that I am not calling correctly...can someone please help me figure out how to use the array to reference the new background image?

external js file:

Code:

function placeThumbs()
{
	var images = ["a.gif", "b.gif", "c.gif"];
	var jgal = document.getElementById("gallery");
	var newLi;
	for (i=0; i<images.length; i++)
	{
		newLi = document.createElement("li");
		jgal.appendChild(newLi);
		newLi.id = i;
		newLi.style.backgroundImage = images[i];
	}
}

html:

Code:

<body>
<ul id="gallery">
</ul>
<script language="javascript" type="text/javascript">placeThumbs()</script>
</body>

**thraddash** · 01-26-2011 01:26 PM

You need to wrap url() around your images in css

Code:

newLi.style.backgroundImage = 'url(' + images[i] + ')';

Nicely written JavaScript BTW. Don't forget to declare i as well

**WolfShade** · 01-26-2011 01:28 PM

The first thing I noticed was this:
newLi.id = i;

This is setting an id to an integer. If I remember correctly, ids/names cannot begin with anything but an underscore or a letter, and cannot be just integers. I think there are also rules about special characters, but I'm not recalling it - I avoid using them, anyway.

There could be something else, but fix that, first, and then see if it's still not working.

^_^

**jjcox** · 01-26-2011 01:37 PM

@thraddash

Problem solved, but your solution leads me to another question I hope you can answer for me. Can you explain to me what the following syntax actually does, so I can know when to use it in the future?

Code:

'url(' + images[i] + ')'

@wolfshade

I'm sure you're right about rules for ids. I was trying a couple of different methods to assign style attributes and accidentally left that snippet in the code.

**thraddash** · 01-26-2011 01:50 PM

You need to have url() wrapped around your style property assignment just like you would have done it in css.

Code:

'url(' + images[i] + ')'

would produce

url(a.gif) / url(b.gif) / url(c.gif)

Just like you could use all the background properties in one line...

Code:

.background = 'url(a.gif) no-repeat left top #000';

http://www.w3schools.com/css/pr_background-image.asp

**jjcox** · 01-26-2011 01:56 PM

I guess what I am asking is how to know when to use the quotes.

Does it matter between single and double quotes? I have sought answers online, but there seems to be variance in opinions.

**thraddash** · 01-26-2011 02:01 PM

When you want to append string literals to variables or other string literals, then you need quotes.

In JavaScript either quote is fine as they do the same thing, unlike in PHP.

I use single quotes for my strings, but I use double quotes for my html attributes:

Javascript

Code:

var data = 'My String';
var html = '<a href="#">' + data + " - This works too" + '</a>';

HTML

Code:

<div class="DivClass" style="border: solid 1px black;"></div>

**jjcox** · 01-26-2011 02:21 PM

Ok, I think I get it now. Sorry, I picked Javascript back up after not using it for a while.

Thank you!!!

**thraddash** · 01-26-2011 02:23 PM

Once you feel you are writing good JavaScript code again, validate it every now and then and learn from what it recommends.

http://www.jslint.com/

Thread: set background image to newly created DOM element

Thread Tools

Display

set background image to newly created DOM element

Thank you!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions