document.getElementById('tbl').children(0).appendChild(oRow);
// document.getElementById('tbl') <-- 지정된 개체
// children(0) <-- 의 첫번째(0) 자식개체
// appendChild(oRow) <- 를 기준으로(즉 기준은첫번째 자식개체) 그 부분에 자식 개체를 추가함
예제코드
<%@ page language="java" contentType="text⁄html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!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=EUC-KR"> <title>Insert title here<⁄title> <script src="http:⁄⁄code.jquery.com⁄jquery-1.7.js"><⁄script> <script language="javascript"> function insertRow(){ oRow = document.createElement("tr"); oCel0=document.createElement("td"); oCel1=document.createElement("td"); oRow.appendChild(oCel0); oRow.appendChild(oCel1); oCel0.innerHTML='<INPUT MAXLENGTH=30 TYPE="TEXT" NAME="TXT_CTF_NAME" VALUE="1열추가">'; ⁄⁄ 행안에 input text 추가 oCel1.innerHTML='<INPUT MAXLENGTH=9 TYPE="TEXT" NAME="TXT_CTF_GET_DATE" VALUE="2열추가">'; tbl.appendChild(oRow); } <⁄script> <⁄head> <body> <input type="button" value="추가" onclick="insertRow();"> <table id="tbl"> <tr> <td>1<⁄td> <td>2<⁄td> <⁄tr> <⁄table> <⁄body> <⁄html>
결과화면
'JavaScript&Web' 카테고리의 다른 글
[JavaScript] select 태그 이용하기 (0) | 2013.08.17 |
---|---|
[Javascript] 빈칸체크하기 간단예제 (0) | 2013.05.21 |
[JavaScript] innerHTML 활용 예제 (0) | 2013.03.31 |
[JavaScript] click 이벤트 발생 예제 (0) | 2013.03.31 |
[JavaScript] jquery를 가지고 css 주기 (0) | 2013.03.31 |