[JavaScript] insetAdjacentHTML()
insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 빠르다.
구문
element.insertAdjacentHTML(position, text);
text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고 (html code), DOM Tree에 삽입할 수 있다.
사용 가능 범위
position은 아래 있는 단어만 사용 가능하다.
- beforebegin : element 앞에
- afterbegin : element 안의 가장 첫번째 child
- beforeend : element 안의 가장 마지막 child
- afterend : element 뒤에
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
EXAMPLE
// <div id="one">one</div>
let d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>
position으로 afterend를 사용 했으므로, element 뒤에 위치된다.
REFERENCE
https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML
Author And Source
이 문제에 관하여([JavaScript] insetAdjacentHTML()), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@godud2604/TIL-JavaScript-insetAdjacentHTML저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)