웹프로그래밍을 하다보면, 자료실 같은 것을 구현할 때 동적으로 폼을 추가하고 삭제 하고 싶을 때가 있다..
단지 동적으로 추가만 할경우에는 <div>에 계속 innerHTML을 이용해서 추가만 하면 되지만..
삭제가 들어가면 이게 또 복잡해 진다..
그래서 DOM(Document Object Model)을 이용한 document.createElement() 함수를 이용하여 동적으로 div를
생성하여 삭제 해보았다.
혼자서 생각한거라, 또 쉬운걸 괜히 복잡하게 짠건 아닌지 걱정;;; 
다른 방법 있으신 분은 얼른 얼른 댓글로 수정 부탁드립니다.
----------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>폼 추가/삭제 예제</title>
<script type="text/javascript">
var count = 0;
function addForm(){
var addedFormDiv = document.getElementById("addedFormDiv");
var str = "";
str+="<br>값1-"+count+" <input type='text' name='tb1_"+count+"'>";
str+="<br>값2-"+count+" <input type='text' name='tb2_"+count+"'>";
str+="<br>값3-"+count+" <input type='text' name='tb3_"+count+"'><BR>";
// 추가할 폼(에 들어갈 HTML)
var addedDiv = document.createElement("div"); // 폼 생성
addedDiv.id = "added_"+count; // 폼 Div에 ID 부여 (삭제를 위해)
addedDiv.innerHTML = str; // 폼 Div안에 HTML삽입
addedFormDiv.appendChild(addedDiv); // 삽입할 DIV에 생성한 폼 삽입
count++;
document.baseForm.count.value=count;
// 다음 페이지에 몇개의 폼을 넘기는지 전달하기 위해 히든 폼에 카운트 저장
}
function delForm(){
var addedFormDiv = document.getElementById("addedFormDiv");
if(count >1){ // 현재 폼이 두개 이상이면
var addedDiv = document.getElementById("added_"+(--count));
// 마지막으로 생성된 폼의 ID를 통해 Div객체를 가져옴
addedFormDiv.removeChild(addedDiv); // 폼 삭제
}else{ // 마지막 폼만 남아있다면
document.baseForm.reset(); // 폼 내용 삭제
}
}
</script>
</head>
<body onload="addForm();">
<center>
<form name="baseForm" action="" method="post">
<input type="hidden" name="count" value="0">
<div id="addedFormDiv"></div><BR> <!-- 폼을 삽입할 DIV -->
<input type="Button" value="추가" onclick="addForm()">
<input type="Button" value="삭제" onclick="delForm()">
<input type="Submit" value="완료">
</form>
</center>
</body>
</html>
ps. 참고 사항
| 엘리먼트를 추가하는 createElement() 와 반대로 특정 엘리먼트를 삭제하고자 할 경우,
removeChild() 사용예 엘리먼트 el 이 있을경우, el.parentNode.removeChild(el);
removeNode() 사용예 document.createElement(‘<div id=”’+div_id+’”>’); 의 반대는 document.getElementById(div_id).removeNode(true); [출처] 자바 스크립트를 이용한 동적 폼 추가/삭제|작성자 일리 |
'Programming > JavaScript' 카테고리의 다른 글
| Table insertRow() Method (0) | 2013.11.27 |
|---|---|
| ajax 사용법 (0) | 2013.11.08 |
| [jquery] jquery 로 체크박스 리스트의 체크된 값들 가져오기 (0) | 2013.09.13 |
| 자바스크립트로 파일 용량 체크하기 (0) | 2013.08.29 |
| opener (0) | 2012.11.07 |