<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
.my{width: 200px; height: 200px; float: left; margin-left: 100px;
background-color: #795548; margin-top:150px;}
</style>
</head>
<body>
<div id="add">
</div>
<script type="text/javascript" src="textJs.js"></script>
</body>
</html>
js
function Date(src,title,price,litprice) {
this.src=src;
this.title=title;
this.price=price;
this.litprice=litprice;
}
var allDate=[
new Date("a.jpg","水果蛋糕",200,20),//模拟数据库数据
new Date("a.jpg","水果蛋糕",200,20),
new Date("a.jpg","水果蛋糕",200,20),
new Date("a.jpg","水果蛋糕",200,20),
new Date("a.jpg","水果蛋糕",200,20),
new Date("a.jpg","水果蛋糕",200,20),
new Date("a.jpg","水果蛋糕",200,20),
new Date("a.jpg","水果蛋糕",200,20),
];
function $(id) {
return document.getElementById(id);//获取父容器方法
}
for(var i=0;i<allDate.length;i++)//动态创建html对象
{
//console.log(allDate.price);
var element=document.createElement("DIV");//HTML标签大小写都可以
//element.innerHTML=allDate[i].price;
element.className="my";//为动态创建的DIV创建类选择器准备定义样式
//考虑多种选择器
var picture = document.createElement("img");
picture.style.width="200px";
picture.style.height="200px";
element.appendChild(picture);
picture.src=allDate[i].src;
var title = document.createElement("p");
title.innerHTML=allDate[i].title;
//prTitle.innerHTML=allDate[i].price;
title.style.textAlign="center";
title.style.color="blue";
element.appendChild(title);
var prTitle = document.createElement("p");
prTitle.innerHTML=allDate[i].price+" "+" "+" "+allDate[i].litprice;
prTitle.style.textAlign="center";
element.appendChild(prTitle);
//element.style.width="100px";
//element.style.height="100px";
//element.style.backgroundColor="red";
$("add").appendChild(element);
}
//扩展使用这种方法可以创建博客的发表文章功能