简洁javascript实现动态添加form,div,input等元素至html中

1.个人简介：

本人在校本科生，酷爱编程。
最近借着做课设的机会顺便学习前端开发，尤其是动态网页这一块。
几年学习的过程中，用过不少语言写过不少项目，经验无比多，但是一直没能及时分享，有些当时自创的优秀代码和独特的想法也都没能保留下来。
今天第一次分享文章，错误的表述请多指正。

2.IDE:

• JetBrains webStorm

3.目的：点击按钮，自动添加新form

（ps:动态添加div,input等其他元素应该同理,这里只拿form举例）

4.涉及的javascript函数：

1. objNode.getElementId();
2. objNode.parentNode;
3. objNode.cloneNode(true);
4. objNode.appendChild();

5.操作前后效果图对比（操作：点击“添加新表单”）

5.1操作前：

5.2操作后：

5.3对比结果：

点击后立刻动态添加了新的form。

6.实现代码：

<div id="f_div" class="panel-body" >	  
    <!--动作按钮，点击触发addform()---->
    <button type="button" class="btn-primary" onclick="addform()">添加新表单</button>
    <!--目标表单---->
    <form id="form_edu" role="form" class="form-horizontal edit_form" >
    	...
    	...
    	<!--表单中代码略---->
    </form>
    <!--动作代码---->
    <script>
        function addform() {
        
            <!--获得id为“form_edu"的form的父节点对象，即id为"f_div"的div,命名为f_Div---->
            f_Div = document.getElementById("form_edu").parentNode;
            
            <!--克隆”form_edu"，为"newform1"（克隆函数会克隆目标的一切属性）---->
            var newform1 = document.getElementById("form_edu").cloneNode(true);
            
            <!--更改"newform1"的id,使其id不和”form_edu"重复--->
            newform1.id = "form_edu1";
            
            <!--更改"newform1"的边框颜色，便于演示观察--->
            newform1.style.borderColor="#0d2798";
            
             <!--把"newform1"追加进父节点f_div--->
            f_Div.appendChild(newform1);
        }
    </script>
</div>

7.补充：

代码中也可以通过指定父节点id直接获取form_edu的父节点对象：
f_Div = document.getElementById(“f_div”);