반응형
1. 요소(Element) 생성
HTML 태그 요소 중에 만들고 싶은 요소를 생성한다.
(1) createElement()
document.createElement('[원하는 요소]')
const newP = document.createElement( 'p' ) // 요소 p 생성
const newDiv = document.createElement( 'div' ) // 요소 div 생성
avaScript에서는 문자열을 정의할 때 작은 따옴표( ' )나 큰 따옴표( " ) 모두 사용할 수 있습니다.
어떤 것을 사용할지는 주로 개인적이거나 팀의 기호에 따라 결정되며, 기능적으로는 동일합니다.
2-1. 부모자식 관계 만들기 (부모 연결하기)
요소를 만들었다면, 어디에 해당 요소를 추가할지 알기 위해 다른 요소와 연결이 필요하다.
여기선 부모와 연결하는 방법에 대해 설명한다.
(1) append()
[부모요소].append([자식요소])
document.body.append(newP); // 자식 연결
특징
- 컨텐츠를 선택된 요소 내부의 끝부분에 삽입 (부모요소의 자식 중 가장 끝 자식 요소로 추가)
- 자식요소로 요소 외에 문자열을 사용할 수도 있다.
const newP = document.createElement( 'p' ) // 요소 p 생성
newP.append('문자열 추가'); // 자식 연결
// 결과 : <p>문자열 추가</p>- 한번에 여러개의 자식 요소를 설정할 수 있다.
const newP = document.createElement( 'p' ) // 요소 p 생성
const newDiv = document.createElement( 'div' ) // 요소 div 생성
document.body.append(newP, newDiv, "Hello"); // 자식 연결
// 결과
/*
<body>
<p></p>
<div></div>
hello
</body>
*/- return 값을 반환하지 않는다.
(2) appendChild()
[부모요소].appendChild([자식요소])
document.body.appendChild(newP); // 자식 연결
특징
- 컨텐츠를 선택된 요소 내부의 끝부분에 삽입 (부모요소의 자식 중 가장 끝 자식 요소로 추가)
- 자식요소로 요소 외에 문자열을 사용할 수 없다.
- 오직 한 개의 요소만 추가할 수 있다.
- return 시 추가되는 인수를 반환한다.
console.log(document.body.appendChild(newP)); // p(Node object)
(3) prepend()
[부모요소].prepend([자식요소])
document.body.prepend(newP); // 자식 연결
특징
- 컨텐츠를 선택된 요소 내부의 끝부분에 삽입 (부모요소의 자식 중 가장 끝 자식 요소로 추가)
- 자식요소로 요소 외에 문자열을 사용할 수도 있다.
const newP = document.createElement( 'p' ) // 요소 p 생성
newP.prepend('문자열 추가'); // 자식 연결
// 결과 : <p>문자열 추가</p>- 한번에 여러개의 자식 요소를 설정할 수 있다.
const newP = document.createElement( 'p' ) // 요소 p 생성
const newDiv = document.createElement( 'div' ) // 요소 div 생성
document.body.prepend(newP, newDiv, "Hello"); // 자식 연결
// 결과
/*
<body>
<p></p>
<div></div>
hello
</body>
*/- return 값을 반환하지 않는다.
자식 추가 함수 차이 정리
| append | appendChild | prepend | |
| 추가 위치 | 뒤 | 뒤 | 앞 |
| 문자열 추가 가능 | O | X | O |
| 다중 자식 추가 가능 | O | X | O |
| 반환값 여부 | X | O | X |
2-2. 형제 관계 만들기 (형제 연결하기)
여기선 형제와 연결하는 방법에 대해 설명한다.
(1) before()
부모 요소 앞에 자식 요소 삽입
[부모요소].before([자식요소])
document.body.before(newP);
(2) after()
부모 요소 뒤에 자식 요소 삽입
[부모요소].after([자식요소])
document.body.after(newP);
3. 아이디 혹은 클래스이름 지정
나중에 확인하기 쉽게, 혹은 CSS 설정을 쉽게 아이디나 클래스 이름을 지정해줄 수 있다.
div.id = 'testId'; // id 지정
div.className = 'testClass'; // class 이름 지정반응형
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [JS] HTML에 JS, CSS 불러오기 (0) | 2023.12.30 |
|---|---|
| #01 Node.js (0) | 2022.07.19 |
