JavaScript에서 만든 것을 HTML에 넣는 방법
createElement() : 요소를 만드는 메서드
const hello = document.createElement( "h1" )
// <h1></h1> 코드가 생성된다. (생성만 됨, 아직 사용할 수 있는 상태는 아님)
append() : 선택한 요소 안에 자식요소를 추가 (1)
- append 메서드는 한번에 여러 개의 자식 요소 설정이 가능함 ( 노드 객체, 문자열 )
- append 메서드는 반환 데이터가 없음
const parent = document.createElement('div');
const childA = document.createElement('h1');
const childB = document.createElement('span');
childA.textContent = 'hello';
parent.append(childA, '안녕', childB); //
// 출력 결과 :
// <body>
// <div>
// <h1>hello</h1>
// 안녕
// <span></span>
// </div>
// </body>
appendChild() : 선택한 요소 안에 자식요소를 추가 (2)
- appendChild 메서드는 노드 객체 추가만 가능, 기본적으로 맨뒤에 위치
- appendChild 메서드는 추가한 자식 노드를 반환함
const parent = document.createElement('div');
const childA = document.createElement('h1');
const childB = document.createElement('span');
childA.textContent = 'hello2'
parent.appendChild(childA);
parent.appendChild(childB);
// 출력 결과 :
// <body>
// <div>
// <h1>hello2</h1>
// <span></span>
// </div>
// </body>
prepend() : 요소의 맨 앞에 자식요소를 추가
insertBefore()
: appendChild()와 비슷하지만 전달받는 인자가 2개이다.
첫번째는 삽입하려는 노드. 두번째는 삽입의 기준이 되는 노드로, 새 노드는 이 앞에 놓이게 된다. (= 삽입할 노드의 다음 노드)
두번째 인자가 null일 경우 appendChild()와 같이 작동해 맨 뒤에 삽입된다.
const h2 = document.querySelector("#clock")
document.body.insertBefore(bgImage, h2);
// 두개의 인자중에 앞의 bgImage는 새로운 노드, 즉 추가하고 싶은 노드이고 h2는 참조할 노드.
// h2요소 앞에 bgImage가 추가되게 된다.
createTextNode() : createElement()를 통해 만든 요소 안에 글자 추가
const hello = document.createElement( "h1" )
hello.createTextNode("이건 새로운 h1입니다")
JS에서 createElement()와 appendChild() 를 통해 이미지를 삽입하기
// 1. 가지고 있는 이미지파일과 동일한 이름의 요소들의 배열인 변수 만들어준다.
const images = ["0.jpg", "1.png", "2.png"];
// 2. 배열 요소들이 랜덤하게 반환되는 chosenImage 라는 변수를 만든다.
const chosenImage = images[Math.floor(Math.random() * images.length)];
// 3. createElement() 를 통해 img태그 모습을 가진 코드의 bgImage 라는 변수를 만든다.
const bgImage = document.createElement("img");
// 4. bgImage.src = img/${chosenImage}. 즉 HTML에서 img태그를 작성하듯이 모습을 똑같이 만들어준다.
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);
// console.log(bgImage) 출력값 : <img src="img/0.jpg>
'JS' 카테고리의 다른 글
| [jQuery] 이벤트 위임(Event Delegation) (0) | 2023.05.12 |
|---|---|
| [jQuery] 선택자, 메소드 정리 (1) | 2023.05.11 |
| [jQuery] 입력 데이터 테이블에 추가하기 (0) | 2023.05.11 |
댓글