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>
how do i append: <img src="..." /> just after <li>
(I want it to be appended straight after document is ready for display)
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" "">
<html xmlns="">
<!-- 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 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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>

Open in new window

<a href="#" onclick=document.img1.src=";">Link</a>
<img src ="http://a.gif" name="img1"><p>

Open in new window

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

<a href="#" onclick='document.img1.src=";"'>Link</a>
<img src ="http://a.gif" name="img1">
Never miss a deadline with

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. (
$(document).ready(function () {
    $("li > a").prepend("<img src="..." />");

Open in new window

Michel PlungjanConnect With a Mentor IT ExpertCommented:
or without jQuery

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


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.
All Courses

From novice to tech pro — start learning today.