• 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;


  • 相关阅读:
    Appium简介
    本章小结
    测试角色定位,岗位职责
    如何做好空降管理者
    如何把控产品质量
    Appium自动化测试教程-自学网-monkeyrunner API
    Appium自动化测试教程-自学网-monkeyrunner简介
    Appium自动化测试教程-自学网-monkey日志管理
    Appium自动化测试教程-自学网-monkey自定义脚本实践
    Appium自动化测试教程-自学网-monkey参数
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13415210.html
Copyright © 2020-2023  润新知