我正在创建一个简单的图像列表。
HTML
<body onload="getImg()">
</body>
JavaScript的
function getImg() {
var list = document.createElement("ul");
list.className = "img-list";
for (i = 0; i < 32; i++) {
var img = document.createElement("img");
var item = document.createElement("li");
path = "images/DT/"+i+".png";
img.src = path;
img.alt = "something";
item.appendChild(img);
list.appendChild(item);
}
console.log(list);
window.alert(list.innerHTML);
}
然后在控制台中,似乎我有列表显示但不知何故图像没有显示在网页中。蚂蚁的想法是怎么回事?
document.body.appendChild(list);
仍然缺失。
function getImg() {
var list = document.createElement("ul");
list.className = "img-list";
for (i = 0; i < 32; i++) {
var img = document.createElement("img");
var item = document.createElement("li");
path = "images/DT/" + i + ".png";
img.src = path;
img.alt = "something";
item.appendChild(img);
list.appendChild(item);
}
document.body.appendChild(list);
}
<body onload="getImg()"></body>
暗示
代码必须在<head>
中
<head>
<script>...</script>
</head>
<body onload="getImg()">...</body>
试试这个:Js:
<script>
function getImg() {
var list = document.createElement("ul");
list.className = "img-list";
for (i = 0; i < 2; i++) {
var img = document.createElement("img");
var item = document.createElement("li");
path = "images/DT/" + i + ".png";
img.src = path;
img.alt = "something";
item.appendChild(img);
list.appendChild(item);
}
console.log(list);
document.getElementById("page").innerHTML = list.innerHTML;
}
</script>
HTML:
<body id="page" onload="getImg()"></body>