Frontend/Javascript
JS 2일차 - JS + HTML
Jenny_yoon
2022. 12. 7. 21:16
728x90
반응형
- JS 와 HTML 연동하기1 (index 19)
<body>
1.<div><span id="box"></span>이건되나? </div>
<!-- id는 무조건 1개! -->
2.<div id="box"> </div>
<!-- 2.에는 "홍길동" 출력 안됨 -->
<!-- js코드(script)와 HTML(body) 코드 모두 출력하고 싶은경우,
HTML코드내에 공간 2개 생성 필수!(예시. <div><span id ="box"> -->
</body>
<script>
document.getElementById("box").innerText="홍길동";
//document : 현재페이지(index19 전체페이지)
//getElementById : 현재페이지에서 해당 id를 찾아라
//innerText : 문자/숫자("홍길동")를 ("box"에) 찍어라
</script>출력결과 :
- JS 와 HTML 연동하기2 (index 19)
<body>
<div id="sbox"></div><br>
<span><div id="mid"></div>님 환영합니다.</span>
<!-- span에 id 넣고 innerText값 넣으면 "님 환영합니다." 출력안되고 "홍길동"만 출력됨 -->
<br>
<ul>
<li><span id="data2"></span> 게시물</li>
</ul>
</body>
<script>
document.getElementById("sbox").innerHTML="<input type='text'>" //쌍따옴표 안에는 외따옴표!
//innerHTML : HTML 코드를 ("sbox"에) 삽입해라
document.getElementById("mid").innerText="홍길동";
var a="2022-12-07";
document.getElementById("data2").innerText=a;
</script>출력결과:
- JS 와 HTML 연동하기3 (index 20)
<body>
<ul id="data"> </ul>
<!-- js로 li태그 값을 출력하는 공간 -->
</body>
<script>
for(i=1; i<=10; i++){
var html = "<li>"+i+"</li>"; //" "는 text 출력이 아닌 HTML코드 삽입!
document.getElementById("data").innerHTML+=html; //전 값 + 현재 값 출력(반복)
// 1~10까지 숫자를 반복하면서 html에 값을 출력함(+=을 빼면 데이터가 누적되지 않음->반복될때마다 전 값은 삭제됌)
console.log(document.getElementById("data").innerHTML);
}
</script>출력결과:
- JS 와 HTML 연동하기4 (index 20)
<body>
<ol id="data2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</body>
<script>
document.getElementById("data2").innerHTML+="<li>6</li>";
</script>출력결과:
728x90
반응형