js实现简单的页面渲染

痛定思痛。 2022-09-11 15:27 210阅读 0赞

<h3>电影</h3>
        <ul></ul>
        <h3>动漫</h3>
        <ul></ul>
        <h3>动画片</h3>
        <ul></ul>

<script>
            // 数组里面包数值（二维数组）
            var data = [
                ['济公', '人之怒'],
                ['火影忍者', '秦时明月', '海贼王', '死神来了'],
                ['熊出没', '花园宝宝', '小猪佩奇', '海绵宝宝'],
            ];
            // 将data中的每一个数据对应渲染到每一个ul中
            // data[0] --> ul[0]
            // data[1] --> ul[1]
            // data[2] --> ul[2]
            // 1、获取元素
            var uls = document.getElementsByTagName('ul');
            // console.log(uls);
            // 每一个
            for (var i = 0; i < uls.length; i++) {
                // 获取相应的下标数据
                console.log(data[i], uls[i]);
                var a = data[i];
                // 将data[i]的每一个数据渲染到ul中
                for(var j = 0; j < a.length; j++) {
                    // 获取每一个a的具体数据
                    console.log(a[j]);
                    // 将数据加到ul中
                    uls[i].innerHTML += '<li>' + a[j] + '</li>';
                }
            }
        </script>

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1312d23e3816426cb28e227a0a1bf9bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS怎么实现页面打印 JS实现页面打印的方法

JS实现页面打印 1、js实现（可实现局部打印） \[html\] <input id="btnPrint" type="button" value="打印" οncli

亦凉/ 2024年04月01日 11:21/ 0 赞/ 91 阅读

相关 js实现简单的页面渲染

<h3>电影</h3> <ul></ul> <h3>动漫</h3> <ul></ul> <h3>动画片<

痛定思痛。/ 2022年09月11日 15:27/ 0 赞/ 211 阅读

相关页面渲染数据

需求：已知购物车数据，渲染页面，根据每一个商品中的选中状态决定全选状态、总数量和总价格 <style> {

绝地灬酷狼/ 2022年09月11日 13:14/ 0 赞/ 259 阅读

相关页面渲染机制

简单渲染过程 url解析： 1. 用户输入URL地址 2. 浏览器解析URL解析出主机名 3. 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表

Bertha 。/ 2022年05月22日 12:50/ 0 赞/ 330 阅读

相关渲染树的简单实现(链表实现)

//对象的创建初始化,挂到链表上去 //实现了简单的内存管理 class CCSprite { private: stati

曾经终败给现在/ 2022年05月15日 02:21/ 0 赞/ 191 阅读

相关页面的表单渲染

今天我们又来写表单的渲染啦，这次，我们用layui方法渲染中的最后一种，叫做转换静态表格，他是转化一段已有的表格元素，无需配置数据接口，在js中指定表格元素，并简单的给表头加上

缺乏、安全感/ 2022年02月13日 14:09/ 0 赞/ 334 阅读

相关 node.js socket通信渲染页面

socket通信 html <body> <h1> 我是 index 页面，我引用了自动生成的 /socket.io/socket.io.js

约定不等于承诺〃/ 2021年12月16日 22:53/ 0 赞/ 210 阅读

相关一个简单的注册页面的js

前端调用οnblur="函数名（this）" /\ \ 用户名 \/ function onblurusername(a)\{ var b=a.value;

阳光穿透心脏的1/2处/ 2021年10月29日 07:38/ 0 赞/ 303 阅读

相关 js的渲染

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script t

矫情吗；*/ 2021年10月19日 07:56/ 0 赞/ 314 阅读

相关 djjango页面渲染

循环涉及多对多 ![1262189-20190629210553318-1060217456.png][] 转载于:https://www.cnblogs.co

亦凉/ 2021年09月29日 20:54/ 0 赞/ 416 阅读