textNode not recognised in I.E - works fine in FF

I have created a new p element and attached a text node to it. This new text node appears on the page in I.E. I have an onclick function that changes the text in this new textnode to the "title" text from a link according to whichever link is clicked.

The whole process works great in firefox but not in I.E

The newly created textnode appears on the screen but IE sends back errors staing this element is null. I am assuming the browser doesn't recognise it but the newly created text in the textnode "Choose an image" appears on the screen ! Any tips would be appreciated.
I alerted the new p element - sends back object exists but has no childnodes.

I have tried to add as many comments as possible but if code is unclear I apologise , 1st post on forum.:)

HTML - new elements created after the unordered list
<ul id="images">
<li><a href="images/ugly-men.jpg" title="New Face">Brand new(ish) face</a></li>
<li><a href="images/severedhead_index.jpg" title="New Male Head">New Male Head</a></li>
<li><a href="images/severedleg_index.jpg" title="New Male leg">New Male Leg</a></li>
<li><a href="images/severed-armindex.jpg" title="Severed Right Arm">New Right Arm</a></li>
<li><a href="images/severedfoot_index.jpg" title="Severed Foot (left)">New Left Foot</a></li>
<li><a href="images/severedhand_index.jpg" title="Severed Left Hand">New Right Hand</a></li>
</ul>

<!--Javascript Functions -->
window.onload = start;

function start()
{ //execute these in order

// create elements
prepPage();

// attach elements event listener for image onclick
attachElements();

// daft slideshow
//startSlideshow();
}

////////////////////////////// PREPPAGE ///////////////////////////
// creates the elements required for the images and title text

function prepPage()
{

// create img element
var placeholder = document.createElement("img");

//set the id attribute of the image tag
placeholder.id ="placeholder";

// set src attribute of the img tag
placeholder.src = "images/Severed head_placeholder.jpg";

//set alt attribute of the img
placeholder.alt = "Severed Head";

//create a <p> element
var description = document.createElement("p");

//set id of the p to description
description.id = "description";

//create a text node for the parent <p>
var descText = document.createTextNode("Choose an image");

//attach the text node to the p element
description.appendChild(descText);

// load in the ul object
var gallery = document.getElementById("images");

// insert the new object after the ul (images)
insertAfter(placeholder,gallery); // placeholder after gallery

// insert the new p object after the new image element !
insertAfter(description,placeholder);

}


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// insertAfter isn't a built in dom function - needs to be created

function insertAfter(newElement,targetElement)
{
var parent = targetElement.parentNode;

if (parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}

else
{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function attachElements()
{

// get object
var imageColl = document.getElementById("images");
// get all a elements and assign to array
var images = imageColl.getElementsByTagName("a");

// loop thru array
for(var i=0;i<images.length;i++)
{
//execute event when link clicked
images[i].onclick = function(){
// pass new attributes to showpic function
showPic(this.href,this.title);
return false;
} //end anonymous function

} //end for loop

} // end attachElements


function showPic(imageName,titleText)
{

//get the placeholder object
var placeholder = document.getElementById("placeholder");

//set the src of the placeholder to the value of the href variable
placeholder.src = imageName;

//////////////////////// Assign title attribute to new element (problem area !!!!!!!!!!!!!! /////////////////////////////////////////////////////////////////
I have tried various ways to assign the value to this texnode - most are commented out.

// get the object I want to assign the text to
var description = document.getElementById("description");
//set the paragraph text to the value of the title attribute in the first child element of the paragraph element
description.firstChild.nodeValue = titleText;
//description.childNodes[0].nodeValue = titleText;
//description.innerHTML = titleText;
alert(description.firstChild.nodeType);
}

You have attached the text inside of the image tag instead of after it.

Replace:

description.appendChild(descText);

With:

description.parentNode.appendChild(descText);

and see if that works better. Otherwise you will need to set up a fragment and append both the image and text to that before adding it to the page.

Attaching it the way you have is the equivalent of placing the text between <img> and </img> and as there is no such end tag the text does not work the way you would expect.

Your problem must be also that you have variables and ids named the same: "description", "placeholder"..... IE does not like that. Change one of them.

Thanks for tips guys. Have tried implementing them but they don't fix problem.
Have tried to rewrite code again from scratch a couple of times , same result.
fine in ff , not working in i.e
Keeps telling me that this object is null , I'm presuming it(IE) is telling me it doesn't exist . But I have assigned the textnode a value which appears on the page , so if it doesn't exist why does it show this value ?
Good advice given , vars and id's shouldn't be same name.

Internet Explorer:What a joy to work with (not)
I'm nodding at you Mr Bill Gates

Thanx , Stuart M.