TS | insertAdjacentElement 사용하여 자식 element 만들기

예전에 인스타그램 클론을 하면서 

댓글을 입력하면 document.createElement 를 사용하여 댓글 element를 추가하여 업데이트 하는 기능을 구현했었다.

 

타입스크립트를 사용하여 이처럼 부모요소에 element를 생성하는 방법에 대해서 알아보고자 한다.

타입스크립트로 이 기능을 구현하기 위해서는 우선 inserAdjacentElement 메서드에 대해 공부해야한다.

 

Element.insertAdjacentElement()

Element 인터페이스의 메서드 중 하나인 insertAdjacentElement 는 주어진 노드요소를 주어진 위치에 넣어주는 역할을 한다.

insertAdjacentElement(position, element);

position 에는 targetElement와 연관된 4가지 위치상태를 나타낸다.

• beforebegin
• afterbegin
• beforeend
• afterend

position name 에 따른 위치

// beforebegin
<div class="parent">
	// afterbegin
	wow
    // beforeend
</div>
// afterend

 

타입스크립트에서 부모 요소에 자식요소 추가하기

// child.ts
export class ChildComponent {
  private element: HTMLElement;
  constructor() {
    this.element = document.createElement("div");
    this.element.setAttribute("class", "contentItem");
    this.element.textContent = "This is child component";
  }

  attachTo(parent: HTMLElement, position: InsertPosition = "afterbegin") {
    parent.insertAdjacentElement(position, this.element);
  }

내부에서 element를 생성해서 사용할 것이므로

private 으로 element 를 선언한다. ( element = 생성할 자식요소 )

그리고 생성자 함수로 새로 생성될 자식요소를 생성한다.

 

attachTo 메소드

childComponent 클래스를 사용하여 생성된 요소를 원하는 위치에 집어넣기 위해 사용될 메소드이다.

parent parameter : 새로 만든 요소를 집어넣을 target 요소

position parameter : 새로 생성된 요소가 삽입될 target 요소와 연관된 위치 

// App.ts
import { ChildComponent } from "./components/child.js";

class App {
  private readonly child: ChildComponent;
  constructor(appRoot: HTMLElement) {
    this.child = new ChildComponent();
    this.child.attachTo(appRoot);
  }
}

new App(document.querySelector(".content") as HTMLElement);

ChildComponent 클래스를 가져와서 요소를 생성하고 appRoot 를 target 으로 하여 attachTo 메소드를 사용해서 요소를 삽입한다.