js把页面内容写入页面

最新推荐文章于 2022-11-18 12:19:32 发布

原创最新推荐文章于 2022-11-18 12:19:32 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了如何利用JavaScript将数据动态地写入到网页中。通过定义数据并初始化页面，结合工具函数遍历循环，创建并填充li元素，实现内容的动态展示。这种方法常见于前端开发，用于增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是效果图，但是没有其他效果，仅仅是一种将内容用js写入页面的方法。

在data里面给出我们想要写到页面的内容，这里注意需要进行页面初始化，写一个工具函数，在工具函数里面遍历循环，创建6个Li,然后innerHTMl写入页面数据结构中

 <script>
        var data ={
      imgArr:["./image/img/1.jpg","./image/img/2.jpg","./image/img/3.jpg","./image/img/4.jpg","./image/img/5.jpg","./image/img/6.jpg"],
      bigtitle:["米家智能门锁标准不是你不是那就好","MIJOY6寸相框摆台美观耐用自由百搭", "小米旅行箱 青春款 20英寸 黄色 20寸", "米家直流变频落地扇 白色", "烟灶套装（天然气）","贝医生0+防蛀健齿牙膏 100克"],
      smiltitle:["一体化活体指纹识别，多种开锁方式","小巧便携，一键唤醒小爱", "强健牙釉质，牙齿更坚固", "小巧便携，一键唤醒小爱", "环保材料，轻便重量", "用科技创造自然风"],
      Price1:["1.00元", "2.00元", "3.00元", "1.00元", "5.00元", "1.00元"],
      Price2:["23元", "1.9元", "46元", "247元", "249元", "22元"]
        }
        let Lis = document.querySelector(".rush-list");
          let btn =document.querySelector("button");
      initialPage();
   
      //工具函数初始化
function initialPage(){
    for(let i=0;i<data.imgArr.length;i++){
        let tempLi=document.createElement("li");
        tempLi.classList.add("rush-item");
        tempLi.innerHTML = ` <div class="shadow">
                <div class="img"><img src="${data.imgArr[i]}"></div>
                <div class="info">
                    <h3 title="">${data.bigtitle[i]}</h3>
                    <p>${data.smiltitle[i]}</p>
                    <p><span>${data.Price1[i]}</span><del>${data.Price2[i]}</del></p>
                    <button>立即购买</button>
                </div>
            </div>`
            Lis.append(tempLi);

            
    }
    
}
document.querySelector("button").onclick = function(){
    window.location.herf='./buy.html';
}