【JS实用技巧】优化动态创建元素的方式，让代码更加优雅且利于维护

摘要：更好的方案模板分离原则模板分离原则将定义模板的那一部分，与的代码逻辑分离开来，让代码更加优雅且利于维护。

在前端开发中，经常需要动态添加一些元素到页面上。那么如何通过一些技巧，优化动态创建页面元素的方式，使得代码更加优雅，并且更易于维护呢？接下来我们通过研究一些实例，一步步地找出最优方案。

这篇文章尽量写得思路清晰且通俗易懂，由浅入深为刚入门前端的新手们带来一些思路和启发。

老手们也可以顺着看下去，当做复习一次。亦或者直接跳到后半部分，去看稍微深入一点的模板数据替换示例，一起交流交流哦。

由于DOM和HTML会存在一定的歧义，所以为了区别开来，文章中这两个术语的意思分别是：

DOM ：专指文档对象，是在JS上以对象的形式存在的。

HTML：专指HTML文本，是一连串字符的集合。

话不多说，我们先来思考一下最基本的问题，如何用JS动态添加元素到页面中去呢？

假设在点击“添加一个乘客”按钮的时候，需要JS动态创建出一个新的输入框来填写姓名：

乘客列表：

    

        乘客姓名：
    
    添加一个乘客
    保存

从上面可以看出，要实现这个功能，我们需要处理的HTML片段是：

    乘客姓名：

那么我们先来看看传统的做法是这样子的：

先直接手动复制粘贴HTML拼接成JS字符串，然后再插入到表单中。

$(".create-passenger").on("click", function() {
    
    // 先直接手动复制粘贴HTML拼接成JS字符串
    var html = 
        "
" +
        "    乘客姓名：" +
        "
";
    // 然后再插入到表单中
    $(".form").append(html);
});

这是种偷懒的实现方式，在部分中小型网站、教科书上，最常见到它的身影。

在开发时的时候，某些情况下使用这种方案，的确可能会比较快速，直接复制粘贴HTML拼成JS字符串就可以了。

但满足这样的条件必须是：

要拼接的HTML字符串很短；

页面结构已经很稳定，能保证以后不会需要作出修改；

页面HMTL和JS的代码量都不多，或者已经直接把JS写在页面上了，所以即使设计不合理也能比较容易查看和维护。

没有做好HTML和JS的分离，脚本强烈耦合了HTML，不妥不妥。

要是后期页面上的HTML有了改动，必须同时记得去找出相关的脚本文件，在JS代码中搜索并修改里面写死的HTML字符串才行。

换个角度再想一想，如果插入的HTML很复杂，有几百行的话。要在JS脚本中手动拼接庞大的字符串，是件非常的麻烦事情，还十分容易出差错。

模板分离原则：将定义模板的那一部分，与JS的代码逻辑分离开来，让代码更加优雅且利于维护。

通过分析页面我们可以知道，表单初始的时候是至少会存在一个乘客输入项的。

所以我们可以复制表单上第一个乘客的DOM来作为模板：

$(".create-passenger").on("click", function() {

    // 复制第一个乘客的DOM作为模板
    var template = $(".form .form-group:first-child").clone();
    // 将DOM模板插入到表单中，形成新的一行
    $(".form").append(template);
});

实例中用了jquery的clone()方法，可以复制整个jquery包装过的DOM对象（不包括对象绑定的事件，如果要连事件也一起复制的话，可以加个参数clone(true)哦）。

有时候复制过来的DOM对象有可能不是最原始的状态，所以记得要初始化一下。例如有像input这样的输入项，要记得把value的值先初始化哦template.find("input").val("")。

如果页面本来就没有相关的DOM，这时候可以手动新建一个隐藏的

    

        乘客姓名：
    

var template = $("#passenger-template > div").clone();