JavaScript HTML Element 편집

Javascript를 활용하면 특정 이벤트가 발생했을 때, 새로운 HTML 요소를 작성하거나 삭제하는 등의 작업을 할 수 있습니다. HTML에서 Element들을 편집하는 방법에 대해서 살펴보도록 하겠습니다.

https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

추가

Javascript에서 새로운 Element를 추가하기 위해서는 3가지 단계가 필요합니다.

1. 새로운 Element를 생성

   document.createElement method를 통해서 신규 Element를 생성할 수 있습니다. 이후 생성된 Element에 속성들을 추가하는 등 일반적인 속성들과 동일한 작업을 수행할 수 있습니다.

   let newParagraphElement = document.createElement('p');
   newParagraphElement.textContent = '요소추가하기!'

2. Parent Element 선택

   새롭게 생성된 Element를 추가하고자 하는 부모Element를 선택한다.

   // 추가하고자하는 요소의 부모요소(parentElement)를 선택
   let parentElement = document.querySelector('p').parentElement;

3. Element 추가

   부모 Element 객체에서 append method를 활용하여 새로운 Element를 추가한다.

   // 부모 Element에 새로운 Element를 
   parentElement.append(newParagraphElement);

삭제

기존에 존재하는 Element를 삭제하기 위해서는 2가지 단계가 필요합니다.

1. 삭제할 Element를 선택

   삭제하고자 하는 Element를 선택한다.

   (아래에서는 섹터에서 가장 마지막 Element를 선택)

   const firstSector = document.getElementById('main-area');
   // 마지만 Element 선택
   const lastElement = firstSector.lastElementChild;

2. Element 삭제

   선택한 Element 객체의 remove method를 통해 해당 Element를 삭제한다.

   lastElement.remove();
   // 예전브라우저 방식에서는 아래 removeChild를 활용하여 제거
   // lastElement.parentElement.removeChild(firstH1Element);

이동

특정한 Element를 이동은 3가지 단계가 필요합니다.

1. 이동할 Element를 선택

   const firstSector = document.getElementById('main-area');
   // 이동하고자 하는 Element 선택
   const moveElement = firstSector.lastElementChild;

2. 이동할 위치의 Element를 선택

   : 해당 Element의 이전 위치로 이동

   // 이동의 기준이 되는 Element 선택
   const targetElement = firstSector.firstElementChild; 

3. 이동기준이 되는 Element의 부모 Element에서 insertBefore method를 통해서 이동

   // 부모요소.insertBefore([이동할객체],[기준객체]
   firstSector.insertBefore(lastParagraphElement, firstParagraphElement);

   ---

   💡

   insertAfter 는 없을까? javascript에서는 insertAfter Method는 별도로 존재하지 않습니다. 따라서 별도 코드를 활용하여 이를 구현하여 사용하여야 합니다. 아래와 코드를 한번 살펴보겠습니다.

   // 기존배열
   <div>
   	<P>1번요소</P>
   	<P>2번요소</P>
   	<P>3번요소</P>
   </div>
   // 변경이후
   <div>
   	<P>1번요소</P>
   	<P>3번요소</P>
   	<P>2번요소</P>
   </div>

   위와 같이 3번요소를 1번요소 다음으로 삽입하고 싶을 경우를 가정해 보겠습니다. 이 떄는 위에서 살펴보았던 순서에 앞서 한 과정만 추가하면 됩니다.

   const firstParagraphElement = document.quserySelectorAll('p')[0];
   const thirdParagraphElement = document.quserySelectorAll('p')[2];
   // 다음 Element를 선택
   // nextSibling (형제 Element)
   const afterParagraphElement = firstParagraphElement.nextSibling;
   afterParagraphElement.parentElement.insertBefore(thirdParagraphElement, afterParagraphElement);

InnerHtml (html 변경)

// HTML
<p>It`s new!<a href="https://www.naver.com">This leads to Naver!</a></p> 

// Javascript

firstParagraph.textContent
// It`s new!This leads to Naver!

firstParagraph.innerHTML
//It`s new!<a href="https://www.naver.com">This leads to Naver!</a>

textContent 를 변경하게 되면 해당 element의 text가 변경되는것이였다면, InnerHtml 은 해당 element의 html 자체를 변경할 수 있습니다. 아래를 살펴보면 textContent 는 출력되는 text 자체를 값으로 가지고 있고, innerHTM 은 html을 값으로 가지고 있습니다.

이를 활용하면 위에서 살펴보았던 요소 추가시 document.createElement 를 진행하지 않고도 새로운 element를 기존 HTML 코드에 추가할 수도 있습니다. 이렇게 새롭게 추가되는 element를 추후에 활용하는 경우가 아니라면, innerHTML 을 활용하는 것이 HTML 요소를 변경 및 추가하는 간단한 방법입니다.

firstParagraph.textContent = "Hi! This is <strong>imortant!</strong>";

firstParagraph.innerHTML = "Hi! This is <strong>imortant!</strong>";