JavaScript渲染数据

jiaowxbx

已于 2022-05-06 22:49:42 修改

阅读量3.3k

点赞数 1

文章标签： javascript

于 2021-05-24 12:24:47 首次发布

本文链接：https://blog.csdn.net/weixin_51333845/article/details/117221241

版权

JavaScript HTML渲染 DOM操作数据绑定前端开发

关键词由CSDN通过智能技术生成

JavaScript渲染数据

这个问题也一直困扰着我，直到最近了解了JavaScript渲染html数据，才明白用js渲染数据是多么多么方便，下面给大家举几个例子：
比如用js实现列表（代码源于学长）：
html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
</head>

<body>
    
    <h1 id="title1"></h1>
    <ul id="list1">
        <!-- <li>示例</li> -->
    </ul>
    <h2 class="title2"></h2>
    <ol class="list2">
        <!-- <li>示例</li> -->
    </ol>
</body>
<script src="./index.js"></script>

</html>

JavaScript部分

function render(){
    // 标签标题
    document.title = 'A'

    const data = ['a','b','c','d','a']
    const $ul = document.querySelector('#list1')
    const $ol = document.querySelector('.list2')

    // 渲染无序列表
    data.forEach(function(v){
        const $li = document.createElement('li')
        $li.textContent = v
        $ul.append($li)
    })
    // 设置title1
    $ul.previousElementSibling.textContent = '无序列表'
    /*
效果
 1. a
 2. b
 3. c
 4. d
 5. a
*/
    // 渲染有序列表
    data.forEach(function(v){
        const $li = document.createElement('li')
        $li.textContent = v
        $ol.append($li)
    })
    /*
    效果
    
 1. a
 2. b
 3. c
 4. d
 5. a
 */

    // 设置title2
    $ol.previousElementSibling.textContent = '有序列表'
}

render()

简单解读一下，document.title改变网页名字，这个就不多解释了，forEach()函数作用是罗列数组中每一个元素，其他的就不细讲了，参照我的JavaScript学习笔记。

显而易见，用js的好处就是不用在html部分一个一个去写<li></li>了
如果这个不够清晰，下面这个例子你就完全懂了：
实现从1-100的无序列表

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">

    </ul>
    
</body>

</html>
<script src="./index.js"></script>

JavaScript部分

function fun()
{
    alert('asd');
    var a=document.querySelector("#list");
    for(var i=1;i<=100;i++)
    {
        var b=document.createElement('li');
        b.textContent=i;
        a.append(b);
    }
}
fun();