728x90
[자바스크립트] 엘리먼트 / 노드 / 태그 생성
Create Element / Node / Tag
기본 형태
//엘리먼트 생성
document.createElement(태그이름);
샘플 예제
<!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>CreateElement Example</title>
</head>
<body>
<div class="container"></div>
<script>
//h1 태그 생성
const newElement1 = document.createElement('h1');
//h1 태그 내 텍스트 설정
newElement1.innerText = '안녕하세요';
//h2 태그 생성
const newElement2 = document.createElement('h2');
//h2 태그 내 텍스트 설정
newElement2.innerText = '메모를 메모하다 티스토리 입니다';
document.querySelector('.container').append(newElement1,newElement2);
</script>
</body>
</html>실행 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 자식 엘리먼트 / 노드 / 태그 추가 append (0) | 2021.05.24 |
|---|---|
| [Javascript] 엘리먼트 속성 추가하기 setAttribute (0) | 2021.05.24 |
| [Javascript] 엘리먼트 앞 / 뒤에 특정 엘리먼트 삽입하기 insertBefore, insertAdjacentElement (0) | 2021.05.24 |
| [Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() (0) | 2021.05.23 |
| [Javascript] 마우스 이벤트 mouse event (0) | 2021.05.21 |
댓글