html追加表单
直接在代码中解释, 追加其他也是一样的道理
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div_id">
<form action="" id="form_id">
测试:<input type="text" value="">
</form>
<button onclick="add()">追加</button>
<button onclick="del()">删除</button>
</div>
</body>
<script>
var i = 0
function add() {
// 获取form表单的父节点, 也就是 id="div_id"这个对象
div_id = document.getElementById("form_id").parentNode;
// 克隆form表单 克隆的时候连上面的id都会克隆上
var newform = document.getElementById("form_id").cloneNode(true);
// 这是为了form表单的id不是相同的,每次都给加1 ,举了个例子
i += 1
newform.id="form_id"+i;
newform.style.color = "red";
// 追加子元素
div_id.appendChild(newform)
}
function del() {
document.getElementById("form_id"+i).remove()
i -= 1
}
</script>
</html>