JS_엘리먼트추가
오늘은 JS코드에서 버튼 클릭시 새로운 엘리먼트를 만들고 그것을 추가하는 방법을 정리하고자 합니다. HTML과 JavaScript를 이용합니다.
사용할 코드
1) 클래스로 HTML 태그 선택 : document.querySelector(".클래스명");
1) 엘리먼트 생성 : document.createElement('태그');
2) 텍스트 대입 : Element명.innertext = "텍스트" ;
3) 이벤트 생성 : Element명.addEventListener("동작(클릭 등)", 실행내용);
4) 엘리먼트의 마지막 자식 선택 : Element명.lastChild
5) 자식 엘리먼트 삭제 : 엘리먼트.removeChild(자식노드명);
HTML 코드
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button class="btn1">생성</button>
<button class="btn2">삭제</button>
<div class="li_1"></div>
</body>
<script src="main.js"></script>
</html>
설명 :
1) 버튼 2개를 생성
2) div태그에 클래스명 "li_1"을 부여
브라우저에서 모습:
자바스크립트 코드
1) (1~3번째 줄)const btn1 = document.querySelector('.btn1');
: btn1 클래스를 가진 태그를 선택하여 btn1이라는 변수에 할당, 이하 마찬가지
2) (5번째 줄) btn1.addEventListener("click", (e)=>{};
:btn1 클래스 가진 태그 클릭시 이벤트 발생
3) (6번째 줄) e.preventDefault();
이벤트 발생 시, 무엇인가가 submit 됨과 동시에 창이 다시 실행되어 초기 화면으로 돌아오게 된다. 그것을 막기 위해 사용. (현재는 무엇인가를 submit하지 않기에 없어도 상관 없음)
4) (7번째 줄) newLi = document.creatElement("li");
li태그를 생성해 newLi 변수에 대입
5) (8번쨰 줄) newLi.innerText = "새로운 LI엘리먼트 입니다.";
newLi의 내부 텍스트에 "새로운 LI엘리먼트 입니다."라는 글을 넣음
6) (9번째 줄) li_1.appendChild(newLi);
li_1의 자식 요소로 newLi를 넣음(li-1 내부에 newLi를 넣음)
7) (13번째 줄) li_1.removeChild(li_1.lastChild);
li_1의 자식 요소 중 마지막 자식 삭제
브라우저에서 실행
동작하는 모습
마치며
이상으로 자바스크립트 JS에서 html의 요소를 선택, 추가, 삭제하는 방법에 대해 정리해보았습니다. 제가 작성한 코드 중 이상한 부분이나, 업그레이드해야할 부분, 혹은 완전한 오류가 있는 경우 댓글로 의견 주시면 감사하겠습니다. 모든 지적, 오지랖 감사히 받아들이며 곧장 수정하겠습니다.
'컴퓨터 > 웹 : JS' 카테고리의 다른 글
| [Node.js] express 시작하기 (node.js 다운로드, npm, express) (0) | 2023.01.06 |
|---|---|
| [Node.js] 해시의 이해, 해시로 비밀번호 생성 (0) | 2022.11.28 |
| [JS]자바스크립트 객체 정리/변수 키값 (0) | 2022.11.11 |
| [JS] 자바스크립트 데이터 타입 정리 (0) | 2022.11.09 |
| [JS] 자바스크립트 변수 선언 var/let/const의 차이 (0) | 2022.11.09 |
댓글