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;


  • 相关阅读:
    FJSC2020合集
    考试前注意事项
    CSP-S&&NOIP2020游记
    IOI2020集训队作业题单
    对拍程序
    Re:memset 赋值
    2019-12-29 Div.3模拟赛题解
    NOI2020 游记
    边三连通分量算法
    【题解】Code+7 教科书般的亵渎
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13415210.html
Copyright © 2011-2022 走看看