[JS] createElement(), appedChild(), innerHTML()

createElement()

JS에는 createElement()라는 게 있습니다

 

HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다.

MDN 정의이고

간단하게 알아보겠습니다

let element = document.createElement('p');

"문서에 p태그를 추가하겠다" 입니다

 

function test() {
  let p = document.createElement('p');
  console.log(p);
}
test();

함수에 먼저 담아 test 해보겠습니다

콘솔에 잘 들어와 있는 걸 확인할 수 있습니다

 

아무런 위치도 정해 주지 않고 요소를 생성만 했기 때문에 이걸 사용하려면 appedChild()가 필요합니다

 

 

appedChild()

Node.appendChild() 메서드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.

MDN 정의

 

document.body.appedChild(p);

body가 부모 요소가 되어 위에서 변수로 지정하고 만들어 놓은 p createElement가 자식으로 붙게 됩니다

 

사용 예)

function test() {
  let p = document.createElement('p');
  document.body.appendChild(p);
}
test();

 

innerHTML()

요소 속성(property) innerHTML 은 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다.

MDN 정의이지만

 

쉽게 말해 innerHTML은 태그의 HTML 내용을 수정합니다

이제 이걸 이용해 appendChild로 붙은 p태그의 내용을 수정해 보겠습니다

 

p.innerHTML = "추가된 p태그";

function test() {
  let p = document.createElement('p');
  document.body.appendChild(p);
  p.innerHTML = "추가된 p태그";
}
test();

변수에 담아 쓰는 습관이 있었으면ㅠ

function test() {
  let p = document.createElement('p');
  let appendTag = document.body.appendChild(p);
  appendTag.innerHTML = "추가된 p태그";
}
test();