티스토리 뷰
createElement.html 파일 만들기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="javascript">
function Add()
{
var table1=document.getElementById("table1");
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.innerText=document.all.txtName.value;
var td2=document.createElement("td");
td2.innerText=document.all.txtAddress.value;
tr.appendChild(td1);
tr.appendChild(td2);
alert(table1.innerHTML);//테이블의 시작과 끝까지의 모든것.
if(table1.firstChild.lastChild.childNodes.length==1)
table1.firstChild.removeChild(table1.firstChild.lastChild);
table1.firstChild.appendChild(tr);
}
</script>
</head>
<body>
<h3>주소록</h3>
<table border="1" width="300" id="table1">
<tr>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td align="center" colspan="2">등록된 회원이 없습니다.</td>
</tr>
</table>
<br />
이름 : <input type="text" size="10" name="txtName" />
주소 : <input type="text" size="10" name="txtAddress" />
<button onclick="Add()">추가하기</button>
</body>
</html>
[출처] JavaScript DOM을 이용한 Element 추가하기 |작성자 소년하루
'프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] 달력소스 (4) | 2008.06.22 |
|---|---|
| [Javascript] 셀렉트박스 다중선택 이동하기 (0) | 2008.06.22 |
| [Javascript] DOM을 이용하여 이미지 동적 생성 하기 (0) | 2008.06.22 |
| XML Javascript DOM을 이용해 테이블 만들기 (0) | 2008.06.22 |
| [Javascript] 숫자를 문자(숫자)로 변환 (0) | 2008.06.22 |
- Total
- Today
- Yesterday