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;


  • 相关阅读:
    Union用法及说明:
    SQL用了Union后的排序问题
    10条PHP编程习惯助你找工作
    PHP性能分析工具xhprof的安装使用与注意事项
    11款数据分析工具(附体验网址)
    Linux下的库操作工具-nm、ar、ldd、ldconfig和ld.so
    ldd显示可执行模块的dependenc
    计算机图形学,三维框架设计
    dnat,snat
    百度识图API
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13415210.html
Copyright © 2011-2022 走看看