zoukankan      html  css  js  c++  java
  • js动态向li添加数据

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/new_file.css" />
    </head>
    <body>
    <div class="container">
    <h2>微博是热点</h2>
    <ul class="contents">
    <!--<li class="list">
    <div class="pic">
    <a href="#">
    <img src="" alt=""/>
    </a>
    </div>
    <div class="des">
    <h3 class="des-title">于正编辑记录</h3>
    <div class="des-text">
    于正编辑记录于正编辑记录于正编辑记录于正编辑记录
    </div>
    </div>
    </li>
    <li class="list">
    <div class="pic">
    <a href="#">
    <img src="" alt=""/>
    </a>
    </div>
    <div class="des">
    <h3 class="des-title">于正编辑记录</h3>
    <div class="des-text">
    于正编辑记录于正编辑记录于正编辑记录于正编辑记录
    </div>
    </div>
    </li>
    <li class="list">
    <div class="pic">
    <a href="#">
    <img src="" alt=""/>
    </a>
    </div>
    <div class="des">
    <h3 class="des-title">于正编辑记录</h3>
    <div class="des-text">
    于正编辑记录于正编辑记录于正编辑记录于正编辑记录
    </div>
    </div>
    </li>
    <li class="list">
    <div class="pic">
    <a href="#">
    <img src="" alt=""/>
    </a>
    </div>
    <div class="des">
    <h3 class="des-title">于正编辑记录</h3>
    <div class="des-text">
    于正编辑记录于正编辑记录于正编辑记录于正编辑记录
    </div>
    </div>
    </li>-->
    </ul>
    <div class="footer">
    <a href="#">查看更多</a>
    </div>
    </div>
    <script src="js/new_file.js"></script>
    </body>
    </html>


    //模拟数据
    // 数组 对象 ----常见数据结构
    // 获取ul元素
    var contents = document.getElementsByClassName('contents')[0];

    var data = [{
    imgdata:'',
    title:'1',
    des:'于正编辑记录于正编辑记录于正编辑记录于正编辑记录1'
    },
    {
    imgdata:'',
    title:'2',
    des:'于正编辑记录于正编辑记录于正编辑记录于正编辑记录2'
    },
    {
    imgdata:'',
    title:'3',
    des:'于正编辑记录于正编辑记录于正编辑记录于正编辑记录3'
    },
    ]
    // ``模板字符串
    var str=``;
    for(var i=0;i<data.length;i++){
    str+=`<li class="list">
    <div class="pic">
    <a href="#">
    <img src="${data[i].imgdata}" alt=""/>
    </a>
    </div>
    <div class="des">
    <h3 class="des-title">${data[i].title}</h3>
    <div class="des-text">
    ${data[i].des}
    </div>
    </div>
    </li>`;
    }
    contents.innerHTML=str;


  • 相关阅读:
    普通锁和分布式锁
    java 正则表达式
    java 字符串转date 格式转换
    消息中间件 kafka
    数据的存储方式:对象存储、文件存储、块存储
    Exceptional Control Flow(6)
    Exceptional Control Flow(5)
    Exceptional Control Flow(4)
    Exceptional Control Flow(3)
    Exceptional Control Flow(2)
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13415210.html
Copyright © 2011-2022 走看看