我在为每个img
添加类时遇到问题,p
没有为每个图像显示任何内容。这是我的代码......
var list = [
{
id: 1,
title: "Dope",
img: "pic/dope.jpg",
link: "dope.html"
},
{
id: 2,
title: "The Do Over",
img: "pic/The_Do-Over.png",
link: "The_Do-Over.html"
},
{
id: 3,
title: "Deadpool",
img: "pic/Deadpool.jpg",
link: "Deadpool.html"
},
{
id: 4,
title: "Johnny English Reborn",
img: "pic/johnny_english_reborn.jpg",
link: "johnny_english_reborn.html"
}
];
var input = document.getElementById("input");
function createList() {
var ul = document.createElement('ul');
for (var i = 0; i <list.length; i++) {
//create li
var li = document.createElement('li');
li.id = list[i].id;
//create paragraph -------------- doesnt desplay anything--problem
var p = document.createElement('p');
p.title = list[i].title;
li.appendChild(p);
//create image
var img = document.createElement("img");
img.src = list[i].img;
img.title = list[i].title;
//adding class
img.class = "image";
//create href
var a = document.createElement("a");
a.href = list[i].link;
a.appendChild(img);
li.appendChild(a);
//append this li to the ul
ul.appendChild(li);
}
//outside the loop, append once the ul to the wrapper
input.appendChild(ul);
console.log(ul);
};
createList();
答案 0 :(得分:1)
在普通javascript中,使用属性 className
添加类名像这样添加类
img.className = "image";
我在这里更新了jsfiddle:https://jsfiddle.net/6bomaqo1/1/
答案 1 :(得分:0)
您好请查看链接https://plnkr.co/edit/wjlaazFaF1F23a6WJlN2?p=preview
一旦创建了html,那么只有你必须在创建dom之前调用该函数,如果你通过id获取elemnt它不会附加,并且我添加了类名,请检查
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input id="input" />
<div id="newid" > </div>
<script>
var list = [
{
id: 1,
title: "Dope",
img: "http://jsfiddle.net/img/logo.png",
link: "dope.html"
},
{
id: 2,
title: "The Do Over",
img: "http://jsfiddle.net/img/logo.png",
link: "The_Do-Over.html"
},
{
id: 3,
title: "Deadpool",
img: "http://jsfiddle.net/img/logo.png",
link: "Deadpool.html"
},
{
id: 4,
title: "Johnny English Reborn",
img: "http://jsfiddle.net/img/logo.png",
link: "johnny_english_reborn.html"
}
];
var input = document.getElementById("input");
function createList() {
var ul = document.createElement('ul');
for (var i = 0; i <list.length; i++) {
//create li
var li = document.createElement('li');
li.id = list[i].id;
//create paragraph -------------- doesnt desplay anything--problem
var p = document.createElement('p');
p.title = list[i].title;
p.innerHTML = list[i].title;
li.appendChild(p);
//create image
var img = document.createElement("img");
img.src = list[i].img;
img.title = list[i].title;
//adding class
img.className = "newimage";
//create href
var a = document.createElement("a");
a.href = list[i].link;
a.appendChild(img);
li.appendChild(a);
//append this li to the ul
ul.appendChild(li);
}
//outside the loop, append once the ul to the wrapper
console.log(ul);
document.getElementById("newid").appendChild(ul);
};
createList();
</script>
</body>
</html>