Logically, I want to embed an image in a link in a div. I've successfully done this with either the link or the image. I've even done it with the link and image in parallel (which is useless) for my purposes. But can't seem to have the image wrapped in a link inside a div.

var div = OpenLayers.Util.createDiv();
var img = OpenLayers.Util.createImage(null, null, null, null, null, null, null, delayDisplay);
img.className = "olAlphaImg";
img.alt = altText;

var link = document.createElement("a");
// link.setAttribute("href", "#");
link.href="#" + altText;
link.appendChild(img);

div.appendChild(link); 

OpenLayers.Util.modifyAlphaImageDiv(div, id, px, sz, imgURL, position, border, sizing, opacity, altText);

return div;

This is for an OpenLayers where I'm trying to ensure keyboard navigation. I just am not sure how to do this with javascript and all the examples only use one appendChild reference. I've tried with innerHTML() but I wasn't using strings so that didn't seem useful.

Logically, I want to embed an image in a link in a div. I've successfully done this with either the link or the image. I've even done it with the link and image in parallel (which is useless) for my purposes. But can't seem to have the image wrapped in a link inside a div.

var div = OpenLayers.Util.createDiv();
var img = OpenLayers.Util.createImage(null, null, null, null, null, null, null, delayDisplay);
img.className = "olAlphaImg";
img.alt = altText;

var link = document.createElement("a");
// link.setAttribute("href", "#");
link.href="#" + altText;
link.appendChild(img);

div.appendChild(link); 

OpenLayers.Util.modifyAlphaImageDiv(div, id, px, sz, imgURL, position, border, sizing, opacity, altText);

return div;

This is for an OpenLayers where I'm trying to ensure keyboard navigation. I just am not sure how to do this with javascript and all the examples only use one appendChild reference. I've tried with innerHTML() but I wasn't using strings so that didn't seem useful.

• javascript
• appendchild

Share Improve this question Follow asked Apr 5, 2012 at 12:52 Mike GiffordMike Gifford 66111 gold badge99 silver badges1717 bronze badges 2

• can you setup jsfiddle for this – Sandeep Manne Commented Apr 5, 2012 at 12:54
• True.. I will try to do that next time. Oleg's answer below answered my question, but would have been better if I'd just done what you'd suggested first. – Mike Gifford Commented Apr 5, 2012 at 20:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

What do you mean by

can't seem to have the image wrapped in a link inside a div

Do you experience any errors?

I might have misunderstood your question, but if not, your code should work.

Here's my example: a working jsfiddle that wraps an image into a link into some container.

var img = document.createElement('img');
img.src = 'https://www.google.fr/images/srpr/logo3w.png';

var anchor = document.createElement('a');
anchor.href = 'http://google.';

// Wrap image in the link (anchor):
anchor.appendChild(img);
// Insert the anchor into container:
document.getElementById('container').appendChild(anchor);