8. [Javascript] JS로 HTML 요소 만들기 (with createElement, appendChild)

Javascript에서 createElement()와 appendChild() 를 사용한다면 HTML에 직접 태그를 작성하지 않고 요소를 생성하여 추가할 수 있습니다.

또한, remove() 로 요소를 삭제 할 수 있으며, setAttribute()로 속성 값을 수정할 수 있습니다.

 

---

 

1. 요소 추가하기(CreateElement, appendChild)

// 부모 요소 선택
var parentElement = document.getElementById('parent');

// 새로운 요소 생성
var newElement = document.createElement('div');
newElement.textContent = '새로운 요소';

// 부모 요소에 새로운 요소 추가
parentElement.appendChild(newElement);

위의 코드에서 createElement 메서드로 새로운 <div> 요소를 생성한 후, 

appendChild 메서드로 newElement 요소를 parentElement의 자식으로 추가합니다.

 

응용하기.

const images = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
const selectedImage = images[Math.floor(Math.random() * images.length)];
//랜덤으로 배열에 저장된 파일명을 선택함

const bgImage = document.createElement("img");
//createElement 로 element를 새로 만들 수도 있음 (html에 <img>를 생성한거랑 같음)
bgImage.src = selectedImage;
//<img src="">에 소스 추가한거랑 같음
document.body.appendChild(bgImage);
//위에서 만든 img를 body의 자식요소로 추가함

---

2. 요소 삭제하기

// 삭제할 요소 선택
var elementToRemove = document.getElementById('element-to-remove');

// 요소 삭제
elementToRemove.remove();

위의 코드에서 getElementById 메서드로 삭제할 요소를 선택한 후, remove 메서드를 호출하여 해당 요소를 삭제합니다.

---

3. 요소 수정하기

// 요소 선택
var elementToModify = document.getElementById('element-to-modify');

// 요소 속성 변경
elementToModify.setAttribute('class', 'new-class');

// 요소 내용 변경
elementToModify.textContent = '수정된 내용';

위의 코드에서 getElementById 메서드로 수정할 요소를 선택한 후, setAttribute 메서드로 요소의 속성을 변경하고, 

textContent 프로퍼티를 사용하여 요소의 내용을 변경합니다. (element-to-modify의 class를 new-class로 수정함)