1) 요소 생성하기 - createElement()
인수로 "HTML 태그"를 입력한다.
const hello = document.createElement( "h1" )
// <h1></h1> 코드가 생성된다.2) 부모자식관계로 요소 추가하기 - appendChild() 유용함
(1) append()와 appendChild()
둘 다 선택한 객체의 자식 요소로 인수를 (뒤에) 추가한다.
document.body.appendChild(hello);
// <h1>태그 코드를 가진 hello라는 변수가 body태그 내부에 생성된다.상기 메소드는 아래와 같은 차이가 존재한다.
①append()
- 인수로 요소 외에 문자열(String)을 사용할 수도 있음.
// DOMString 삽입
const parent = document.createElement('div');
parent.append('append 예시');
// 결과
// <div>append 예시</div>- 한 번에 여러 개의 자식 요소를 설정할 수 있음
const div = document.createElement('div');
const span = document.createElement('span');
const p = document.createElement('p');
document.body.append(div, 'hello', span, p);
// result
<body>
<div></div>
hello
<span></span>
<p></p>
</body>- return 값을 반환하지 않음.
const div = document.createElement('div');
const span = document.createElement('span');
const p = document.createElement('p');
console.log(document.body.append(div, 'hello', span, p)); // undefined
②appendChild()
-인수로 오직 요소만 받을 수 있음. 인수로 문자열을 넣을 경우 에러 발생함.
// Node object 삽입
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// <div><p></p></div>-오직 한 개의 요소만 추가할 수 있음.
/ DOMString 삽입
const parent = document.createElement('div');
parent.appendChild('텍스트');
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'-return시 추가되는 인수를 return(반환)한다.
const div = document.createElement('div');
const span = document.createElement('span');
console.log(document.body.appendChild(div)); // div(Node object)
③참고URL
[Javascript] append vs appendChild 차이점 (초간단)
append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간
webruden.tistory.com
(2) prepend()와 append()
선택한 객체의 자식 요소로 인수를 앞 뒤에 추가한다.
| append(), appendChild() | 선택된 객체 내부의 끝 부분에 삽입 |
| prepend() | 선택된 객체 내부의 시작 부분에 삽입 |
(3) insertBefore(b,c)와 insertAfter(b,c)
매개변수 두 개가 와야 한다. 선택한 객체의 내부의 c 요소(기준) 앞에 b 요소(대상)를 삽입(이동)합니다.이동이라 함은 b 요소가 기존에 부모 객체에 존재할 경우 기존 위치에서 c 요소 앞으로 이동하게 된다. 만일 c가 null일 경우 자식 요소 끝에 삽입된다. b는 필수, c는 옵션인 것을 알 수 있다.
부모노드.insertBefore(삽입 할 노드, 기준 점 노드);| A.insertBefore(b,c) | A 객체를 B 앞이 되도록 B 삽입 |
| A.insertAfter(b,C) | A 객체를 B 뒤가 되도록 B 삽입 |
①HTML
<ul class = "parent">
<li class="newEle">+</li>
<li class="ele">button</li>
<li class="ele">button</li>
<li class="ele">button</li>
<li class="ele">button</li>
</ul>②JS
let ele = document.querySelector('.newEle');
let parent = document.querySelector('.parent');
parent.insertBefore(ele, null); //맨 끝에 삽입
parent.insertBefore(ele, parent.firstChild); //맨 앞에 삽입*firstChild에 대해서도 추가로 정리했다.
③참고 URL
자바스크립트 - insertBefore() 특정 위치에 앞에 노드 삽입
insertBefore() -> 부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입합니다. -> 내가 원하는 위치에 삽입 할 수 있습니다. 기존 부모 노드에서도 굳이 삭제 할 필요 없이 자동으로 이동하게 됩니다. e
powerku.tistory.com
3) 형제관계로 요소 추가하기
| A.before(B) | A 객체 앞에 B 삽입 |
| A.after(B) | A 객체 뒤에 B 삽입 |
'[Javascript]' 카테고리의 다른 글
| [Javascript] (1)firstChild와 firstElementChild (2)createTextNode와 innerHTML 그리고 textContent (3)Node와 Element (0) | 2023.03.17 |
|---|---|
| [Javascript] createElement, forEach, innerHTML, append 활용 예시 (0) | 2023.03.16 |
| [Javascript] Date() 관련 메소드 정리 (0) | 2023.03.15 |
| [Javascript] toString() 메소드 - 문자열로 type 변환 (0) | 2023.03.15 |
| [Javascript] prototype 관련 Note (0) | 2023.03.15 |