javascript - js拼接html有没有比较快的方法？

Question

    <p class="formcode clearfix">
        <p class="title">新建用户<p class="xicon">x</p></p>
        <p class="formbox">
            <form action="">
                <p><span><label>* </label>用户名</span><input type="text" placeholder="数字/中英文组合,5-20位字符"></p>
                <p><span><label>* </label>登录密码</span><input type="text"></p>
                <p><span><label>* </label>确认密码</span><input type="text"></p>
                <p><span><label>* </label>员工姓名</span><input type="text"></p>
                <p><span><label>* </label>用户角色</span></p>
                <p><span><label>* </label>联系手机</span><input type="text"></p>
                <p class="tips">用户角色决定用户权限，请到角色管理系统统一设置</p>
                <input type="button" value="保存">
            </form>
        </p>
    </p>

拼接这样一段html 有没有技巧 或者简化方法

---

Answer 1

<script id="我是模板" type="text/html">
    <p class="formcode clearfix">
        <p class="title">新建用户<p class="xicon">x</p></p>
        <p class="formbox">
            <form action="">
                <p><span><label>* </label>用户名</span><input type="text" placeholder="数字/中英文组合,5-20位字符"></p>
                <p><span><label>* </label>登录密码</span><input type="text"></p>
                <p><span><label>* </label>确认密码</span><input type="text"></p>
                <p><span><label>* </label>员工姓名</span><input type="text"></p>
                <p><span><label>* </label>用户角色</span></p>
                <p><span><label>* </label>联系手机</span><input type="text"></p>
                <p class="tips">用户角色决定用户权限，请到角色管理系统统一设置</p>
                <input type="button" value="保存">
            </form>
        </p>
    </p>
</script>
<script>
    let _template = document.getElementById('我是模板').innerHTML;
</script>

Answer 2

如果你是ES6无须拼接，直接将HTML拉到 `` 里面。

当然，在现代浏览器里面，比较快的办法就是 [].join('') 了。

Answer 3

es6写法：

let str = `
    <p class="formcode clearfix">
        <p class="title">新建用户<p class="xicon">x</p></p>
        <p class="formbox">
            <form action="">
                <p><span><label>* </label>用户名</span><input type="text" placeholder="数字/中英文组合,5-20位字符"></p>
                <p><span><label>* </label>登录密码</span><input type="text"></p>
                <p><span><label>* </label>确认密码</span><input type="text"></p>
                <p><span><label>* </label>员工姓名</span><input type="text"></p>
                <p><span><label>* </label>用户角色</span></p>
                <p><span><label>* </label>联系手机</span><input type="text"></p>
                <p class="tips">用户角色决定用户权限，请到角色管理系统统一设置</p>
                <input type="button" value="保存">
            </form>
        </p>
    </p>
`

然后用babel转成es5.

Answer 4

1. 使用ES6字符串(优点:简单,性能好;缺点:不支持循环等扩展功能)

2. 使用模板引擎(优点:灵活,支持循环等功能;缺点:不同模板引擎模板语言不太一样,性能稍逊直接拼接)

Answer 5

换React用jsx :)
一般情况下的话可以用domNode.innerHTML([your html tags].join(''))

Answer 6

搜索一下 artTemplate，很方便，只有 5k 大小，腾讯的