Dynamically build multiple <a><img></a> elements

[jdadwilson]

I have need to dynamically build via JavaScript multiple <a><img></a> type elements. This is simple for single elements given that the <a> tag can be given an ID for the href as can the <img> tag for the src. BUT, how does one use JavaScript to do this?

I use the following HTML to set the needed ID for the <a> tag...


<div id="myImage"></div>

Then in the js I have...



imagePath = 'files_images/myImage.jpg';
myElement = document.createElement('a');
myElement.setAttribute('href', imagePath);
myElement.setAttribute('target', '_blank');
myElement.setAttribute('style', 'float:right; display:inline; margin:0;');
myElement.setAttribute('border', 0);
document.getElementById('myImage').appendChild(myElement);


to set the <a> tag.

But I also need to include the <img> tag as the text of the <a> tag such as...


<a href="files_images/myImage.jpg"><img src="files_images/myImage.jpg"></a>

The <a> tag cannot be created with an ID as there are an unknown number of images that can be created per page.

TIA for your assistance
jdadwilson

[jscheuer1]

Where are you getting all the images from? Do you have an array of paths to them? If so you can iterate over the array to create each link and image*. If the images are provided in some other fashion, it can probably be worked with. But we would need to know. Also, are all of these links with their images to go in the myImage div? This we also need to know, and if not, where do they go?

Your question also includes asking how to get the image tag into the link tag. That part is easy if we are to work within the given structure:


imagePath = 'files_images/myImage.jpg';
myElement = document.createElement('a');
myElement.setAttribute('href', imagePath);
myElement.setAttribute('target', '_blank');
myElement.setAttribute('style', 'float:right; display:inline; margin:0;');
myElement.setAttribute('border', 0);
anImage = document.createElement('img');
anImage.setAttribute('src', imagePath);
myElement.appendChild(anImage);
document.getElementById('myImage').appendChild(myElement);


*For example, given your existing div, this code:


var myImages = [
'files_images/myImage1.jpg',
'files_images/myImage2.jpg',
'files_images/myImage3.jpg'
], lim = myImages.length, imagePath, myElement, anImage, i = -1;

while (++i < lim){
imagePath = myImages[i];
myElement = document.createElement('a');
myElement.setAttribute('href', imagePath);
myElement.setAttribute('target', '_blank');
myElement.setAttribute('style', 'float:right; display:inline; margin:0;');
myElement.setAttribute('border', 0);
anImage = document.createElement('img');
anImage.setAttribute('src', imagePath);
myElement.appendChild(anImage);
document.getElementById('myImage').appendChild(myElement);
}

Would produce this virtual markup:


<div id="myImage"><a href="files_images/myImage1.jpg" target="_blank" style="float:right; display:inline; margin:0;" border="0"><img src="files_images/myImage1.jpg"></a><a href="files_images/myImage2.jpg" target="_blank" style="float:right; display:inline; margin:0;" border="0"><img src="files_images/myImage2.jpg"></a><a href="files_images/myImage3.jpg" target="_blank" style="float:right; display:inline; margin:0;" border="0"><img src="files_images/myImage3.jpg"></a></div>

[jdadwilson]

Thanks once again... Your example exactly answered my question. Being a novice with JavaScript I was thinking that myElement would have to be appended before anImage.

jdadwilson