javascript实现的动态添加表单元素input,button等(appendChild)

JavaScript中使用appendChild()方法可以动态添加HTML元素。该方法可以将新建的元素节点添加到指定父级节点的最后一个子节点后面。以下是详细的攻略：

步骤

1. 首先需要获取到需要添加元素的父节点对象，可以使用document.getElementById()方法或其它方法获取。
2. 创建需要添加的元素节点对象，例如创建一个input元素节点，可以使用document.createElement("input")方法。
3. 使用appendChild()方法将新建的元素节点添加到指定的父级节点中。

下面提供两个示例帮助理解：

示例1：动态添加单行文本框

// 获取父节点对象
var parent = document.getElementById("form");

// 创建input元素
var input = document.createElement("input");

// 设置input元素属性
input.setAttribute("type", "text");
input.setAttribute("name", "username");

// 将input元素添加到form节点中
parent.appendChild(input);

上述代码将动态创建一个单行文本框，设置其name属性为"username"，并添加到id为"form"的父节点中。

示例2：动态添加按钮

// 获取父节点对象
var parent = document.getElementById("form");

// 创建button元素
var button = document.createElement("button");

// 设置button元素文本内容
button.innerHTML = "Submit";

// 将button元素添加到form节点中
parent.appendChild(button);

上述代码将动态创建一个按钮元素，设置其文本内容为"Submit"，并添加到id为"form"的父节点中。

注意：以上示例均是简单的演示，实际使用中需要根据实际需求设置更多的属性和样式。