How to append image to the link by javascript

Hi I've got to add picture to the side of a link.

My question is how do I append image tag to the link via javascript?

the link looks like this:
 <li id="35">
<a href="?address=1"> link </a>
</li>
how do i append: <img src="..." /> just after <li>
(I want it to be appended straight after document is ready for display)
??
vidda22Asked:
Who is Participating?
 
stevepicksConnect With a Mentor Commented:
 this script is the closest i could think:
1) edit : images[1].src = "images/image1.gif";  to point to a real image
2) get a clear.gif image that is transparent
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
 
images = new Array;
images[1] = new Image();
images[1].src = "images/image1.gif";
images[2] = new Image();
images[2].src = "images/image2.gif";
images[3] = new Image();
images[3].src = "images/image3.gif";
images[4] = new Image();
images[4].src = "images/image4.gif";
images[5] = new Image();
images[5].src = "images/image5.gif";
images[6] = new Image();
images[6].src = "images/image6.gif";
function GetPic(num) { 
document.ImageHolder.src = images[num].src;
document.ImageHolder.width = images[num].width;
document.ImageHolder.height = images[num].height;
}
// End -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body onLoad="GetPic(1);">
<li id="35">
<img name="ImageHolder" src="images/clear.gif" width="1" height="1" border="0" alt="some text">
<a href="?address=1"> link </a>
</li>
</body>
</html>

Open in new window

0
 
GwynforWebCommented:
this?
<a href="#" onclick=document.img1.src="http://images.google.ca/intl/en_ALL/images/logos/images_logo_lg.gif;">Link</a>
<p>
<img src ="http://a.gif" name="img1"><p>

Open in new window

0
 
GwynforWebCommented:
sorry there's a typo above (although strangly it works?). It should be

<a href="#" onclick='document.img1.src="http://images.google.ca/intl/en_ALL/images/logos/images_logo_lg.gif;"'>Link</a>
<p>
<img src ="http://a.gif" name="img1">
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Bane83Connect With a Mentor Commented:
Use jquery for this. (http://jquery.com/)
$(document).ready(function () {
    $("li > a").prepend("<img src="..." />");
});

Open in new window

0
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
or without jQuery

<script>
window.onload=function() {
  var html =document.getElementById('35').innerHTML;
  if (html.toLowerCase().indexOf('img')==-1)
    document.getElementById('35').innerHTML = '<img src="..." />'+html;
}
</script>
0
 
Bane83Commented:
That assumes a single li of id='35'.

Alternatively:

items = document.getElementsByTagName('li') OR containingListElement.getElementsByTagName('li');
for(i = 0; i < items.length; i++)
{
     item.innerHTML = '<img src="..." />' + item.innerHTML;
}

I just prefer using jquery since it generally works in any browser you throw at it.
0
All Courses

From novice to tech pro — start learning today.