原生js非侵入式循环渲染HTML模板

烫手的猪蹄儿

已于 2023-02-16 12:27:35 修改

阅读量992

点赞数

分类专栏：实用代码库文章标签：前端 Powered by 金山文档

于 2023-02-10 15:50:48 首次发布

本文链接：https://blog.csdn.net/zhangzhibinshuai/article/details/128971721

版权

本文介绍了如何在不使用如v-for等框架指令的情况下，使用原生JavaScript将服务端返回的JSON数组数据循环渲染为HTML列表，并进行枚举值的中文映射。内容包括循环渲染div的innerHTML、outerHTML以及处理多层嵌套的div，展示了具体的效果。

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

适用场景

服务端返回json数组, 前端将数据循环渲染成列表

有些枚举值比如常用的status, 需要翻译(映射)成汉字显示出来

不想在HTML标签中加入 v-for 之类的标签

功能介绍

循环某个div的innerHTML

HTML:
<div class="effect table" id="tpl_repeat_inner">
    <div class="flex-row-around tr">
        <div class="td">{name}</div>
        <div class="td">{age}</div>
        <div class="td">{fav}</div>
    </div>
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

烫手的猪蹄儿

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

07-利用循环实现列表的渲染.html

09-03

07-利用循环实现列表的渲染

原生JS 将数组的数据循环遍历到HTML中

热门推荐

weianl的博客

08-19

3万+

由于我在学校是学安卓的然后实习期学前端又是直接上框架，所以原生JS的一些基本操作用着真难受！！！下面是原生JS 将数组的数据循环遍历到HTML中的列子，是的，没有用框架的HTML里的循环是用JS将一串字符串标签丢给HTML的id中的。 JS： var forenoonStr = ""; var forenoonData = ["8:00", "8:30", "9:00", "9:30", "...

参与评论您还未登录，请先登录后发表或查看评论

js如何渲染页面

yuzhochaojiwudib的博客

07-28

168

然后，它创建了一个新的p元素，并为其设置了一些文本内容。最后，它将这个新的p元素添加到了contentDiv中，从而实现了页面的渲染。这只是一个非常基础的例子。在实际开发中，你可能会使用更复杂的库或框架（如React、Vue或Angular）来进行页面渲染，这些库或框架提供了更强大和灵活的工具来处理页面渲染和交互。在JavaScript中，你可以使用各种方法来渲染页面。以下是一个简单的例子，其中我们将使用原生的JavaScript。在这个HTML页面中，我们有一个。来渲染一个简单的HTML页面。

原生html使用循环,Jquery的each循环和原生循环及html5foreach循环的效率比较

weixin_28688385的博客

05-31

571

首先先上模拟代码Insert title herevar result = createData();function createData() {var result = [];for (var index = 0; index < 900000; index++) {result.push(index);}return result;}/*** 模拟jquery的each循环*/func...

html中怎么数据循环显示出来,for循环json数据到html重复输出

weixin_29491167的博客

06-04

1257

var data = {"message":"","error":"false","human":[{"title":"我的活动","title_r":"8/23","msg":[{"name":"一起去品尝茶论道吧","name_r":"一对一","content":"报名费5元/人","content_r":"邀请3-5人","contents":"2018-02-07 19:23:37","...

JS将原生数据或新数据循环到页面

12-28

596

数据循环到页面

基于原生JavaScript架构的WebdeskUI后台管理模板设计源码

最新发布

09-25

本项目是一款仿桌面应用风格的后台管理模板源码，采用原生JavaScript架构设计，灵感源自Vue与jQuery。该模板无需依赖任何第三方库，功能丰富，免费使用。整个项目包含175个文件，包括61个JavaScript文件、47个CSS...

原生js+html形成的简易聊天室

11-26

原生js+html形成的简易聊天室

原生JS实现循环Nodelist Dom列表的4种方式示例

10-18

本篇文章将详细讲解四种在原生JavaScript中循环Nodelist DOM列表的方式。 ### 第一种方式：原生for循环这是最基础也是最常见的遍历方式。通过设置一个索引变量i，并在循环条件中检查索引是否小于Nodelist的长度，...

原生js实现表格循环滚动

01-22

本文实例为大家分享了js实现表格循环滚动的具体代码，供大家参考，具体内容如下 css table{width: 500px;border: 1px solid gray;border-collapse: collapse;} th,td{line-height: 35px;border: 1px solid gray;...

原生js动态渲染循环div

u013361179的博客

06-23

2558

原生js动态渲染循环div

vue.js v-model的运算

qq_37805832的博客

02-15

1433

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javasc

12.列表渲染

s12345672的博客

08-17

330

列表渲染 1. 基本列表条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。 2.v-show 写法：v-show="表达式"

原生html使用循环,原生javascript学习：用循环改变div颜色

weixin_29486701的博客

05-31

648

在使用javascript过程中，想循环遍历一个数组，经常使用的语法有两种：for (var i; i < array.length; i++) {statement;}for (var i in array) {statement;}这两种用法看起来能做同样的事情，但实际上两个循环的循环次数一般是不一样的。源码如下：#button{text-align:center;}#outer{wid...

js 将js中数据动态渲染到html页面

weixin_46287150的博客

11-26

1万+

js 将js中数据动态渲染到html页面 css代码 <style> *{ margin: 0; padding: 0; } table{ width: 300px; text-align: center; } </style> html代码 <table border="1" cellspacing="0"

数据渲染 DOM循环

Chico_Feng的博客

12-06

468

数据渲染 DOM循环

html文件如何for循环,html循环代码怎么写？有几种循环语句？

weixin_29731589的博客

06-19

1万+

在互联网的热潮中，不断的涌现出很多的技术岗位。那么今天我们就来说下有关于“html循环代码怎么写？”这个问题吧！下面是小编的一些方法和代码，希望对大家有所帮助。1.首先我们新建个 .html 文件在文件中输入下面这些代码就可以实现循环了，会比较的相对简单。代码如下：循环的使用var array1 = [1,4,2,5,7,8];//遍历数据利用下标的变化for(var i=0;idocumen...

页面渲染的知识

szydqq的博客

03-14

619

页面渲染的知识

使用JS的Template模板加载复杂HTML和使用Ajax提交复杂对象

cm777的博客

11-20

1085

在为HTML添加动态布局的时候,比如需要动态添加一个div的数量或者input，通常的做法都是写一个function函数，然后把想要动态添加的div或者nput的HTML文本放在一个var变量中，之后使用click点击事件或者使用$.each/for循环进行批量添加。这是一个解决方案，可是一旦需要添加的HTML文本多了起来，那么这种方式看起来就显得过于沉重，所以我们可以使用另一种方式。我们日常写javaScript代码的时候使用的标签是这样的 <script type="text/ja

原生js非侵入式循环渲染HTML模板

适用场景

功能介绍

循环某个div的innerHTML