Question

Hy all;
I am using Javascript and HTML5 with XML.
The Javascript will read data from the XML file to get the name of the image and it works smoothly.
In a right menu tab, i have put the following code:

<li><a href="#" onClick="loadImg(1)">Part 1</a></li>

Now i have created the function loadImg as following :

function loadImg(n){
TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
alert(TestP[n]);
img.src = TestP[n];   
alert(n);
alert(TestP[n]);
document.body.appendChild(img);
}

I just want that the created image will take place in the right part, note that i am using the following CSS:

#container {
 width:800px;
 }
#left {
    top:10%;
    position: absolute;
    float: left;
    width:200px;
    left:3%;
   }
#right {
  position: absolute;
  top: 10%;
  right: 30%;
}

I wish that when i click, the image will be created in the right position, Any ideas???

Answer 1

If you want to append an element to a specific container use document.getElementById('yourID') .appendChild(yourElement) instead of document.body.appendChild(yourElement). This will add your element as a child to the element with the ID yourID.