js使用两种拼接字符串的方式循环数据动态生成HTML

最新推荐文章于 2024-04-28 00:00:00 发布

程序媛zcx

最新推荐文章于 2024-04-28 00:00:00 发布

阅读量2.2k

点赞数 1

分类专栏： JavaScript 前端 HTML 文章标签： javascript es6 html5 模板字符串

本文链接：https://blog.csdn.net/qq_40015157/article/details/110931611

版权

JavaScript 同时被 3 个专栏收录

72 篇文章 9 订阅

订阅专栏

前端

37 篇文章 1 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

js使用两种拼接字符串的方式循环数据动态生成HTML，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #content {
            width: 500px;
            margin: 0 auto;
            background: pink;
        }

        li {
            list-style: none;
            width: 50%;
            float: left;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid;
        }

        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;

        }
    </style>
</head>
<body>
<div id="content"></div>
</body>
</html>
<script src="jquery.min.js"></script>
<script>
    let List = [{
        "id": 1, "name": "a"
    }, {
        "id": 2, "name": "b"
    }, {"id": 3, "name": "c"}];
    //两种实现方式
    //1、`` 模板字符串
    for (let j = 0; j < List.length; j++) {
        let svp = List[j];
        let html1 = `<ul id="combWin-${svp.id}" class="clearfix">
                <li>${svp.id}</li>
                <li>${svp.name}</li>
            </ul>`
        $("#content").append(html1);
    }

    //2、拼接字符串
    for (let j = 0; j < List.length; j++) {
        let svp = List[j];
        let html1 = "<ul id='combWin-" + svp.id + "' class='clearfix'>" +
            "<li>" + svp.id + "</li>" +
            "<li>" + svp.name + "</li>" +
            "</ul>";
        $("#content").append(html1);
    }
</script>

写了简单样式，主要效果图如下：

程序媛zcx

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
js使用两种拼接字符串的方式循环数据动态生成HTML

js使用两种拼接字符串的方式循环数据动态生成HTML，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; }
复制链接

扫一扫