setAttribute()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="doSave(event)">저장</button>
<script>
function doSave(e) {
let obj = e.target;
// 사용자가 중복해서 버튼을 또 클릭하지 못하도록 버튼을 disabled 시킴
obj.disabled = true;
// 저장을 실행하는 코드 작성
setTimeout(function () {
// 저장 완료까지 2초가 소요된 것으로 가정. 2초 후 버튼을 다시 enabled
obj.disabled = false;
}, 2000);
}
</script>
</body>
</html>
insertAdjacentHTML()
innerHTML과 innerText는 현재 접근한 DOM 요소 안에 자식 노드로 텍스트 혹은
HTML을 삽입하는 방법. 이렇게 하면 자식 노드가 모두 교체
insertAdjacentHTML()을 사용하면 DOM 요소를 기준으로 형제 노드 혹은 자식 노드를 교체하지 않고 자식 노드의 제일 앞 혹은 제일 뒤에 새로운 HTML을 삽입 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>여기는 h1 영역</h1>
<!-- beforebegin -->
<ul id="myUl">
<!-- afterbegin -->
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
<!-- beforeend -->
</ul>
<!-- afterend -->
<button onclick="myFunction()">항목추가</button>
<script>
function myFunction() {
let h = document.getElementById("myUl");
h.insertAdjacentHTML("afterbegin", "<li>새로운 항목</li>");
}
</script>
</body>
</html>
코딩공부