최신글
hyeonga_code
Ajax_InnerHTML 본문
반응형
- 속성을 사용한 화면 변경
- XMLHttpRequest 객체를 사용하는 프로그램의 코드 구성
- 사용자가 이벤트를 발생시키면 웹 서버에서 데이터를 전송합니다.
- 웹 서버가 생성한 응답 결과를 바탕으로 화면을 조작합니다.
- alert() 메소드로 출력하는 경우 화면의 내용이 변경되거나 새로운 내용이 추가되도록 구현해야 합니다.
- webapp > ch02 폴더 생성
- ch02 > innerHTML.html 파일 생성
=====
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML 내용 출력</title>
<script type="text/javascript">
function view() {
// body 태그의 p 태그를 지정합니다.
var p1 = document.getElementById("p1");
// html 내의 p 태그의 내용을 얻어옵니다.
alert(p1.innerHTML);
}
</script>
</head>
<body>
<p id="p1">
<strong>Ajax</strong> 프로그래밍, 기초
</p>
<input type="button" value="보기" onclick="view()" />
</body>
</html>
|
- 보기 버튼을 클릭하는 경우 팝업 창으로 P 태그 내의 코드가 출력됩니다.
- innerHTML 속성에 원하는 HTML 코드만 값으로 지정하면 해당 내용이 변경되는 것을 알 수 있습니다.
반응형
'Ajax' 카테고리의 다른 글
| Ajax_innerHTML_웹 서버의 응답 결과 반영하기 (0) | 2023.10.17 |
|---|---|
| Ajax_innerHTML_1 초마다 현재 시간을 출력합니다. (0) | 2023.10.17 |
| Ajax_실습_httpRequest.js 모듈 사용하기 (0) | 2023.10.16 |
| Ajax_파라미터에서 한글 처리 방법 (0) | 2023.10.15 |
| Ajax_동기/비동기 방식의 차이 (0) | 2023.10.14 |
'Ajax' Related Articles
more
