javascript_javascript 기술에 구현된 양식 요소 입력, 버튼 등(appendChild)을 동적으로 추가합니다.

작은 시스템을 작성할 때 양식 요소를 동적으로 추가해야 하기 때문에 이 튜토리얼은 저만의 구현 방법에 따라 작성했습니다!
많은 웹사이트에서 유사한 효과를 본 적이 있을 것입니다.
1. createElement 메소드는 입력 요소를 생성합니다!

코드 복사 코드는 다음과 같습니다.

var newInput = document.createElement("input ");

2. 이름, 유형 등 관련 속성을 설정합니다.

코드 복사 코드는 다음과 같습니다.

newInput.type=mytype;
newInput.name="input1";

3. 태그 내용에 요소를 추가하세요!

코드 복사 코드는 다음과 같습니다.

TemO.appendChild(newInput)

Javascrip 핵심 코드:

코드 복사 코드는 다음과 같습니다.

<스크립트 언어 ="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add")
var newInput = document.createElement("input ");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");// 라인 변경 기능에 대한 BR 태그를 생성하세요!
TemO.appendChild(개행)
}

<title>동적으로 양식 요소 추가</title> <form action="" method="get" name="frm"> <div id="add"> <input type="text" name="textfield"> </div> </form> <input name="" type="button" value="新建文本框" onclick="AddElement('text')"> <input name="" type="button" value="新建复选框" onclick="AddElement('checkbox')"> <input name="" type="button" value="新建单选框" onclick="AddElement('radio')"> <input name="" type="button" value="新建文件域" onclick="AddElement('file')"> <input name="" type="button" value="新建密码框" onclick="AddElement('password')"> <input name="" type="button" value="新建提交按钮" onclick="AddElement('submit')"> <input name="" type="button" value="新建恢复按钮" onclick="AddElement('reset')">
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]