append, html
append : 선택된 요소의 끝부분에 내용을 추가
html : 선택된 요소의 내용을 교체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let member = [];
let cnt = 0;
window.onload = () => {
let msg = "";
for (let i = 0; i < 100; i++) {
member[i] = i;
if (i < 10) {
msg += i + "<br>";
cnt++;
}
}
console.log(member);
$("#content").html(msg);
};
const view = () => {
let msg = "<hr>";
for (let i = cnt + 1; i <= cnt + 10; i++) {
msg += member[i] + "<br>";
}
cnt += 10;
$("#content").append(msg);
};
const appendVal = () => {
// document.getElementById("txt").insertBefore
$("#txt").append("내용 추가");
};
const htmlVal = () => {
$("#txt").html("내용 교체");
};
function inputVal() {
var t = $("#val01").val();
$("#val01").val("");
$("#val02").val(t);
}
</script>
</head>
<body>
<div id="txt"></div>
<hr />
<input type="text" id="val01" /><br />
<input type="text" id="val02" /><br />
<button onclick="inputVal()">input 변경</button>
<button onclick="appendVal()">appendVal</button>
<button onclick="htmlVal()">htmlVal</button>
<hr />
<div id="content"></div>
<button onclick="view()">더보기</button>
</body>
</html>728x90
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] 답글 달기 기능 만들기 (0) | 2024.03.27 |
|---|---|
| [JavaScript] jquery - slideDown, slideUp 메소드 (0) | 2024.03.27 |
| [JavaScript] animate (0) | 2024.03.27 |
| [JavaScript] 클래스 추가, css 추가 (0) | 2024.03.27 |
| [JavaScript] JQuery 사용법 (0) | 2024.03.27 |