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);
}
Before you post, read our: 
