用JS动态添加标签

有的业务会要求可以填写多行，一般就是那种一对多的业务，往往就会有这样的要求。比如说，我一笔报销，可能需要填写多条详情，那这时候开发人员在开发的时候，就需要提供给用户可以填写多行数据的功能。

添加一行的功能有多种实现方式，这里我主要总结下我在开发时候常用的两种。

一种是事先在页面写好添加一行的所有元素，然后隐藏；另一种是直接在JS写好然后再添加。

// 添加一行
<div class="insertHere">
    <button type="button" onclick="add()">添加一行</button>
</div>

第一种：

// 页面部分
<div class="clone" style="display: none">
    <div class="row">
       <input name="a1" />
       <input name="a2" />
    </div>
</div>

// JS部分
function add() {
    $("div.clone .row").clone().insertBefore("div.insertHere");
}

第二种：

function add() {
    var input1 = "<input name='a1' />";
    var input2 = "<input name='a2' />";
    var html = input1 + input2;
    $("div.insertHere").before(html); 
}

个人习惯用第二种，主要是一开始接到这种需求的时候尝试用第一种方式的时候我没添加成功，也不知问题之所在，现在也不知，所以自然而然就用第二种方式。

这里再额外记录下自己有时候用表格来进行页面布局的时候，添加一行的实现方式。

// HTML部分
<table>
    <tbody id="tbody">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
        <td></td>
        <td><button type="button" onclick="add()">＋</button></td>
    </tr>
    </tbody>
</table>

// JS部分
function add() {
    var td1 = "<td><input name='a1' /></td>";
    var td2 = "<td><input name='a2' /></td>";
    var tr = "<tr>" + td1 + td2 +"</tr>";
    $("#tbody tr:last").after(tr);
}