자바스크립트로 요소 추가하기 : createElement(), appendChild()

여때까지는 JS를 이용해 HTML에서 뭔가를 가져왔음
document.querySelector("#quote span:first-child") 이런식으로.

하지만 먼저 JS에서 무언가를 만들어서 그걸 HTML에 넣어볼 수도 있음.

이미지 여러개를 HTML만으로 랜덤하게 뜨게 넣을수없어서 JS를 통해
이미지를 만들고 HTML에 넣어주어야한다.

createElement()

요소를 만드는 메서드

const hello = document.createElement( "h1" )
// <h1></h1> 코드가 생성된다.

하지만 요소를 만들기만해서는 사용할 수 없다.
HTML에 없으니까.

다른요소에 집어넣을 수 있도록 하는 메서드가

appendChild()

선택한 요소 안에 자식요소를 추가한다.

document.body.appendChild(hello);
// <h1>태그 코드를 가진 hello라는 변수가 body태그 내부에 생성된다.

기본적으로 appendChild 를 통해 요소를 삽입하면 맨뒤에 위치하게 된다.
아직 노드의 개념을 정확히는 모르겠어서 일단 간단하게 이해하려 한다.

---

prepend()

appendChild()와 달리 요소의 맨 앞에 위치하게 된다는 차이점이 있다.

insertBefore()

appendChild()와 비슷하지만 전달받는 인자가 2개이다.
첫번째는 삽입하려는 노드
두번째는 삽입의 기준이 되는 노드로, 새 노드는 이 앞에 놓이게 된다.
(= 삽입할 노드의 다음 노드)
두번째 인자가 null일 경우 appendChild()와 같이 작동해 맨 뒤에 삽입된다.

누군가 써놓은 정리글

nsertBefore() 메소드를 사용하시면 됩니다
이 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다.
const h2 = document.querySelector("#clock")
document.body.insertBefore(bgImage, h2);
두개의 인자중에 앞의 bgImage는 새로운 노드 즉 추가하고 싶은 노드이고 h2는 참조할 노드입니다. 즉 이렇게 코드를 짜시면 h2요소 앞에 bgImage가 추가되게 됩니다.

+
createElement()를 통해 만든 요소 안에 글자를 넣게 해주는

createTextNode()

const hello = document.createElement( "h1" )
hello.createTextNode("이건 새로운 h1입니다")

---

JS에서 createElement()와 appendChild() 를 통해 이미지를 삽입하기

const images = ["0.jpg", "1.png", "2.png"];

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

1. 가지고 있는 이미지파일과 동일한 이름의 요소들의 배열인 변수 만들어준다.

2. 배열 요소들이 랜덤하게 반환되는 chosenImage 라는 변수를 만든다.

3. createElement() 를 통해 img태그 모습을 가진 코드의 bgImage 라는 변수를 만든다.

4. bgImage.src = img/${chosenImage}. 즉 HTML에서 img태그를 작성하듯이 모습을 똑같이 만들어준다.

4-1. console.log(bgImage) 해보면

<img src="img/0.jpg>

// 이렇게 HTML에 이미지 태그 삽입한것과 같은 모습의 코드가
// 출력되는것을 확인할 수 있다.

5. appendChild()를 통해 부모요소인 body 안에 bgImage를 삽입해준다.

---