insertAdjacentElement / insertAdjacentHTML / insertAdjacentText 차이

특정 위치에 요소 추가 1

insertAdjacentElement

특정 위치에 요소 그 자체를 추가

첫 번째 매개 변수: 위치 / 두 번째 매개 변수: element 타입

const p1 = document.createElement('p');
p1.innerText = "insertAdjacentElement 로 요소 추가";
document.querySelector(".test").insertAdjacentElement("beforeend",p1);

특정 위치에 요소 추가 2

insertAdjacentHTML

특정 위치에 추가한 문자열을 HTML 코드로 해석해서 요소가 됨

document.querySelector(".test").insertAdjacentHTML("beforeend","<p>insertAdjacentHTML 로 요소 추가</p>");

특정 위치에 문자열 추가

insertAdjacentText

특정 위치에 그냥 문자열 추가

document.querySelector(".test").insertAdjacentText("beforeend","insertAdjacentText 로 텍스트 추가");

추가로..

코드를 길게 작성하기 싫어서 앞에 요소를 선택하는 부분에 있어 jquery 를 사용하려고 했다.
하지만 jqeury 로 추출한 요소에 insertAdjectentHTML 함수를 사용할 수 없다.

왜냐하면 javascript 로 추출한 요소와 jquery 로 추출한 요소는 차이가 있기 때문이다.

querySelector 는 요소가 아니라 해당 요소의 문자열 형식이 반환된다.
$() 선택자는 특별한 기능이 추가된 해당 요소의 객체가 반환된다.
둘은 완전 다른 것이다.