HTML动态生成模板（2）

最新推荐文章于 2024-07-31 11:05:25 发布

置顶

BruceCheng夏夏

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量7.5k

点赞数

分类专栏： HTML5实战开发文章标签： templete html模板

本文链接：https://blog.csdn.net/brucecheng22/article/details/51282800

版权

本文介绍了一种更高效的方法，通过text/templete的script标签动态生成HTML代码，无需JS中的for循环，模板结构更清晰。文章详细阐述了实现步骤，包括引入arttmpl.js，编写模板，构造JSON数据，以及数据与模板的绑定。提供了一个简单易懂的教程，读者可以通过下载Demo亲自实践。

摘要由CSDN通过智能技术生成

如何通过模板动态生成HTML代码？

看过我写的（1）版本的可能都很清楚，如何通过text/html类型的script标签动态生成html代码。

那么今天我就和大家说说另一种更加牛掰的方式，那就是通过text/templete的script标签来动态生成代码。

需求还是和（1）一样，就是实现动态生成问卷调查，那么我们先看一下代码是怎样的？

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>模板页的使用</title>
        <script src="../js/jquery-2.0.3.min.js"></script>
        <script src="../js/mui.min.js"></script>
        <link href="../css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" charset="UTF-8">
            mui.init();
        </script>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>