web前端 js 点击添加

想实现点击“+“按钮，就添加一行上图一样的三个框在该按钮下方对应位置，拜托各位帮忙解决一下。

 <div id="dvList">
    <div id="dvAdd"><input type="text" style="width:60px" placeholder="成员名" /><input placeholder="成员角色" type="text" style="width:200px" /><input type="button" value="添加" onclick="clone(this)" /></div>
</div>
<script type="text/javascript">
    function clone(btn) {
        if (btn.value == '添加') {
            var div = document.getElementById('dvAdd');
            div = div.cloneNode(true);
            div.removeAttribute('id');
            div.lastChild.value = '删除';
            document.getElementById('dvList').appendChild(div);

        }
        else if (confirm('确认删除！？')) {
            document.getElementById('dvList').removeChild(btn.parentNode);
        }
    }
</script>

http://blog.csdn.net/ljheee/article/details/51321550

http://blog.csdn.net/ljheee/article/details/51318677

可以使用拼接html的方式，把当前行的html代码写出来，然后点击按钮把这一样的代码append到当前容器中