yoon's Devlog

이전 게시물에서 insertAdjacentElement, insertAdjacentHTML과 append를 비교하며 간략하게 사용법에 대해 알아보았다. 정확한 사용법을 알아보기 위해 공식 문서를 살펴보자. https://developer.mozilla.org/en-US/docs/Web/API/Element/append Element.append() - Web APIs | MDN The Element.append() method inserts a set of Node objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes. developer.mo..

본 포스팅의 핵심은 insertAdjacentHTML, insertAdjacentElement, append의 매개변수를 정확히 알고 사용법을 구별하는 것이다. insertAdjacentHTML() 메서드는 HTML 같은 특정 텍스트를 파싱하고, 특정 위치에 원하는 HTML요소를 추가한다. 사용법은 다음과 같다. element.insertAdjacentHTML(position,text); position에는 앞서 배운 다음의 것들만 사용 가능하다. beforebegin (element의 부모가 존재해야 함) afterbegin beforeend afterend (element의 부모가 존재해야 함) 아래 예제는 append, insertAdjacentElement, insertAdjacentHTML의 활..

innerHTML은 HTML의 요소로 삽입하는 방법 중 하나이다. 다음 예제를 살펴보자. 예제 innerText vs innerHTML hello 추가하기 결과 코드를 뜯어 살펴보자. 1) innerText와 innerHTML의 비교 //대입한 문자열을 html 형식으로 해석해서 자식 요소로 두기 document.querySelector("#one").innerText = "daum"; //HTML 속성으로 들어감 document.querySelector("#two").innerHTML = "daum"; 이 부분에서의 결과물은 다음과 같다. 보다시피 innerText로 한 것은 문자열로, innerHTML로 한 것은 링크로 나타나는 모습이다. 여기서, innerHTML로 하면 "

이전 게시물에서 요소를 삽입할 때 append()메서드를 사용했었다. append 사용 시, 가장 마지막에 요소가 추가됨을 확인할 수 있었는데, 이번에는 다양한 위치에서 요소를 삽입하는 방법에 대해 공부해보려 한다. 그 중에서도 beforebegin, afterbegin, beforeend, afterend에 대해 다뤄볼 예정이다. 사용법은 insertAdjacentElement() 메서드를 활용한다. [insertAdjacentElement] targetElement.insertAdjacentElement(position, element); position 'beforebegin': targetElement 외부 앞 (트리 요소의 부모가 있는 경우에만 작동) 'afterbegin': targetElem..

[createElement] Document.createElement() 메서드는지정한 tagName의 HTML 요소를 만들어 반환한다. 즉, 반환값은 생성한 Element 이다. tagName을 인식하지 못하면 HTMLUnknownElement (en-US)을 대신 반환한다. createElement를 통해 페이지 로딩시점에는 없었던 요소를 원하는 시점에 동적으로 만들어 삽입할 수 있다. 삽입은 .append()를 통해서 한다. 삽입에 관련된 자세한 내용은 다음 게시물에서 다룰 예정! let element = document.createElement(tagName[, options]); tagName : 생성할 요소의 유형을 가리키는 문자열 options: is 속성을 가진 ElementCreation..