HTML5:如何在特定位置加载图像onClick

时间:2012-03-16 09:12:52

标签: javascript css xml html5

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

我希望当我点击时,图像将在正确的位置创建,任何想法???

1 个答案:

答案 0 :(得分:0)

如果要将元素附加到特定容器,请使用document.getElementById('yourID') .appendChild(yourElement)而不是document.body.appendChild(yourElement)。这会将您的元素作为子元素添加到ID为yourID的元素。