본문 바로가기

03. Development/11. XML

JavaScript DOM을 이용한 Element 추가

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" />
  &nbsp;<button onclick="Add()">추가하기</button>
</body>
</html>