Javascript InnerHTML
소스
<html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
<script type="text/javascript">
function Test() {
//<a>태그 접근 -> 조작
var link = document.getElementById("link1");
//태그가 가지고 있는 속성을 자바스크립트에서 접근
link.href = "http://www.gogle.com";
link.title = "구글";
//시작태그와 끝태그 사이의 텍스트 접근
link.innerText = "구글";
}
function Test2() {
var div = document.getElementById("div1");
//div는 a, img와는 틀리게 태그상에 속성이 식별자 외엔 없다. title 태그, 와 innerText는 모든태그 적용 가능
//alert(div.innerText);
//div.innerHTML = "<h3>zzarungna</h3>";
//innerHTML : 시작태그와 끝태그 사이의 모든 HTML
div.innerHTML = "<input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr /><input type='text' /><hr />";
}
function NextPerson() {
document.getElementById("txtName").innerText = "아무게";
document.getElementById("txtAge").innerText = "30";
document.getElementById("Tel").innerText = "010-222-2222";
}
function AddInfo() {
//var tbody = document.getElementById("tbody");
//<tr>의 부모
//alert(tbody.innerHTML);
var table = document.getElementById("table1");
//첫번째 자식 tbody
alert(table1.firstChild.innerHTML = "sadfasdfasdfasdf");
}
</script>
</head>
<body>
<!--Ex09.htm-->
<a href="http://www.naver.com" title="네이버" alt="네이버경로가 잘못 되었습니다." id="link1">네이버</a>
<input type="button" value="테스트" onclick="Test();" />
<hr />
<div id="div1">데이터</div>
<input type="button" value="테스트2" onclick="Test2();" />
<hr />
<table width="200" border="1" id="table1">
<tbody id="tbody">
<tr>
<td width="50">이름</td>
<td width="150" id="txtName">홍길동</td>
</tr>
<tr>
<td>나이</td>
<td id="txtAge">20</td>
</tr>
<tr>
<td>전화</td>
<td id="Tel">010-111-1111</td>
</tr>
</tbody>
</table>
<input type="button" value="이전사람" />
<input type="button" value="다음사람" onclick="NextPerson();"/>
<input type="button" value="추가정보" onclick="AddInfo();"/>
</body>
</html>
결과
버튼 클릭후의 결과
