createElement, appendChild
2023. 5. 22. 14:37ㆍJS
반응형
input 태그에 textContent를 입력하고 엔터키를 누르면 <ul> 태그 하위에 <li><span></span></li>를 append 하는 기능을 만든다.
<!DOCTYPE html>
<head>
<!-- css 파일-->
<link href="" />
<script>
function keyPress() {
let inputValue = document.querySelector('#todo-input');
if (inputValue.value !== '' && event.keyCode === 13) {
const todoList = document.querySelector('#todo-list');
//element 생성
const newLi = document.createElement('li');
const newSpan = document.createElement('span');
newSpan.textContent = inputValue.value;
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
inputValue.value = ''; //append 후에 텍스트필드 비움
}
}
</script>
</head>
<body>
<input type="text" id="todo-input" onkeydown="keyPress()" />
<ul id="todo-list">
<li><span>할 일</span></li>
</ul>
</body>
</html>
- createElement: document에서 엘리먼트를 생성하는 메소드
- appendChild: 해당 태그 하위에 엘리먼트를 삽입해주는 메소드
cf) 지금은 스트립트를 내부에서 사용하고 있지만 외부 스크립트를 사용할 때는 defer 속성을 사용한다.
defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시한다.
<script src="./script.js" defer></script>
참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있다.
- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨.
- async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.
* defer 속성과 관련된 부분은 http://www.tcpschool.com/html-tag-attrs/script-defer 를 참고하였다.
반응형
'JS' 카테고리의 다른 글
| 얕은 복사(Spread 연산자), 깊은 복사(JSON.parse()), Rest Parameter (0) | 2023.05.24 |
|---|---|
| 구조분해할당 (0) | 2023.05.24 |
| <ul>, <ol>, <li> (0) | 2023.05.21 |
| 브라우저의 web storage (0) | 2023.05.21 |
| JS코드에서 지정한 innerHTML (0) | 2023.04.27 |