自动创建标签（博客发表原理）

最新推荐文章于 2020-07-30 18:58:38 发布

小P趴菜

最新推荐文章于 2020-07-30 18:58:38 发布

阅读量407

点赞数

分类专栏： WEB基础文章标签： html

本文链接：https://blog.csdn.net/qq_32458791/article/details/80266605

版权

WEB基础专栏收录该内容

31 篇文章 1 订阅

订阅专栏

<!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>

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+"&nbsp"+"&nbsp"+"&nbsp"+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);
}
//扩展使用这种方法可以创建博客的发表文章功能

小P趴菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
自动创建标签（博客发表原理）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" > .my{width: 200px; height:...
复制链接

扫一扫

专栏目录