没有前端，求问前端 js 动态添加大段 html 的问题

[yinzhong]

每个 input 往后端传值，大概十个 input 一组，不确定多少组，组的数量可以动态改变，我用 js 加了一大段 html 然后还往里面拼接 id，这个 js 好长，你们平时做也是这样吗？我还有类似需求，感觉页面好丑，以前没见过我这样写的，主要是间的少，这样写好吗，网上也找不到例子，只知道这样做能行，但是感觉不好，有啥我不知道的方法吗

[yokyj]

用 react 或者 vue..数据驱动

[imdong]

```
<script type="text/html" id="tpl-demo1">
<div>Test<span class="red">Success</span></div>
</script>
<script>
var html_str = document.getElementById('tpl-demo1').innerHTML;
</script>
```

[jeodeng]

唤起了我以前写原生的时候记忆，封装一个插入 input 的函数，需要 n 组就循环 n 次调用函数就直接操作 dom 了。

[hewelzei]

试试 lodash.template 或者 art-template 之类可以在前端直接引入的模版库，这样可能写的时候舒服一些

[fancy111]

很明显你没搞清楚业务的最佳处理方式。
十个 input 一组？不确定有多少组？这么多数据干嘛不动态添加转 json 传，搞那么多 input 有必要吗？

[Augi]

不用 react 啥的，就用个 template 吧，js 循环添加

[ChefIsAwesome]

https://gist.github.com/blackChef/f1dad62ed5efe4ff9a84bf50b39ef564

[xiaobo944]

不光是这些麻烦问题，以后还会遇到绑定事件的问题，
重复绑定，触发了两次之类的。
还有元素是否创建出来，能不能绑定事件。
或者元素未生成之前你的值是获取不到的。

我早先也经常创建删除 HTML 遇到了不少问题，还尝试自定义模板字符，将字符串替换，执行函数什么的用 eval 去跑，太麻烦了，到了后边改动很麻烦。

直接输出 HTML 的做法 demo 项目还可以，如果正常开发，请移步现代前端开发技术选型 react Vue 之类的。

[tyx1703]

可以看看 Mustache

[ironMan1995]

比如要给后端传递 const data = {inputValOne: '',inputValTwo: ''} ，先写个 input 的组件，给它定义一个自定义属性 data-*(名字就是要传给后端的数据属性名)，const keys = Object.keys(data)，直接循环 keys 遍历 input 组件，所有组件监听一个 onChange 事件,通过 const name = event.currentTarget.getAttribute(‘data-*’) 获取自定义名称，data[name] = ev.target.value，最后 JSON.stringify(data),传给后端就行，这是我的思路

[ironMan1995]

循环一个组件或者模板动态渲染出来，最后直接插入到页面，操作 dom 次数也少

[12tall]

vue?
时间紧 能跑起来就是好代码~

[LyleRockkk]

找个前端朋友帮你解决这个问题吧，如果非要自己来，可以了解一下 template 模板语法，vue ,react 上手可能会慢一些