Element란 태그들을 이용해서 만들어낸 웹페이지의 구성요소로 html에서 시작태그와 종료태그를 포함한 것이다.
elemnet 노드, 텍스트 노드를 실제 화면에 그려주게 된다.
// Element Node(요소)
const span = document.createElement('span');
const p = document.createElement('p');
li.append(span, p); // 여러 개의 요소 추가
// 문자열(DOMString)
span.append('hello');
=> <span>hello</span>
// 요소 + 문자열
p.append('${value}: ${name} 입니다', document.createElement('br'));
여러개의 자식요소에 추가가 가능하기에 .appendChild() 보다 널리 사용된다.
이미 생성되어있는 element 요소에만 추가가 가능하며, 선택한 요소의 자식 노드 리스트중 가장 마지막 자식으로 추가되어 한번에 하나의 노드만 추가가 가능하다.
ParentNode의 첫번째 자식으로 Node 객체 또는 DOMString 객체를 삽입한다.
선택한 Element 뒤에 새 Element를 추가
선택한 Element 앞에 새 Element를 추가
const target7 = document.querySelector('.url')
let naver = document.createElement('a') // 1
naver.setAttribute('href', 'https://www.naver.com') // 2
naver.textContent = '네이버 링크'
target7.append(naver) // 3
a태그 속성인 herf에 값을 넣을 때 사용// .add - 클래스 삽입
// .remove - 클래스 제거
// .contains - 클래스 존재 여부 체크
// .toggle - 클래스 존재 여부 체크 후 없으면 삽입 있으면 제거
➕ 피로그래밍 세션에서 들은 javascript 내용을 기반으로 정리하고 공부한 게시글입니다.