HTML5: как загрузить изображение на клик в определенном месте

Question

Hy all;Я использую Javascript и HTML5 с XML.Javascript будет читать данные из XML-файла, чтобы получить имя изображения, и это работает гладко.В правой вкладке меню я поместил следующий код:

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

Теперь я создал функцию loadImg следующим образом:

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);
}

Я просто хочу, чтобы созданное изображение получилоПоместите в правой части, обратите внимание, что я использую следующий CSS:

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

Я хочу, чтобы при нажатии изображение было создано в правильном положении, Любые идеи ???

Answer 1

Если вы хотите добавить элемент в конкретный контейнер, используйте document.getElementById('yourID') .appendChild(yourElement) вместо document.body.appendChild(yourElement).Это добавит ваш элемент как дочерний элемент с идентификатором yourID.