1월9일

Vanilla JS

append(), prepend()

예제 1

let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]

예제 2

let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"

 

그동안 createElement로 새로운 태그를 만들기 귀찮아서

``안에 html을 적고 바로 innerHTML을 넣는 형식으로 진행했었는데

 

그렇게 되면 연속으로 삽입해야하는 요소가 있을 경우

const temp = `<div>something</div>`;
document.querySelector('#orders_status_end').insertAdjacentHTML('beforeend', temp);

이런식으로 생소한 insertAdjacentHTML을 써야 됐다.

 

물론 이 방법도 있지만

다음번에 필요한 일이 있을 때는 createElement을 통해 태그 생성하고 거기에 데이터를 넣은 후

append()나 prepend를 통해 추가하는 방법을 사용해봐야겠다.