포시코딩

1월5일 본문

TIL

1월5일

포시 2023. 1. 5. 20:53
728x90

Vanilla Javascript에서의 jQuery clear(), append()

 

clear() -> innerHTML

jQuery

$('#orders_status_end').clear();

Vanilla JS

document.querySelector('#orders_status_end').innerHTML = '';

 

append() -> insertAdjacentHTML()

jQuery

const temp = `<div>something</div>`;
$('#orders_status_end').append(temp);

Vanilla JS

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

 

jQuery로는 쉽게 다룰 수 있지만 

점점 쓰지 않는 추세라 

Vanilla JS로 어떻게 할까 찾아보다가 insertAdjacentHTML을 통해 append 하는건 처음 봐서 정리해봤다.

더 자세한 정보는 아래 블로그를 통해 확인 가능하다.

 

 

 

 

도움받은 곳

https://velog.io/@1106laura/insertAdjacentHTML

 

JS로 DOM 요소를 삽입할 때 : insertAdjacentHTML

요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오.

velog.io

728x90

'TIL' 카테고리의 다른 글

1월7일 - count, sort, sorted  (0) 2023.01.07
1월6일  (0) 2023.01.07
1월4일  (0) 2023.01.04
1월3일  (0) 2023.01.03
1월2일  (0) 2023.01.02