FEDev Story

innerHTMLinnerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTMLouterHTML은 선택한 엘리먼트를 포함해서 처리된다. innerText, outerTextinnerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. insertAdjacentHTML()좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다. target.insertAdjacentHTML('beforebegin', '...'); beforebegin은 target 노드의 앞에 두번째 인자인 H1 노드 객체를 삽입한다..

출처 : 생활코딩 (https://opentutorials.org/course/1375/6701) 노드 추가노드의 추가와 관련된 API들은 아래와 같다.appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.document.createElement(tagname) 엘리먼트 노드를 추가한다.document.createTextNode(data) 텍스트 노드를 추가..

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.)nodeType노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log(name, Node[name]); } 실행결과: ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESS..