전체 글330 DOM 명령어 createElement (생성) add (추가) innerHTML HTML 또는 XML 마크업을 가져오거나 설정 // (XSS 공격의 위험이 있음) textContent 텍스트 노드로 대체 (XSS 공격의 위험이 없음) appendChild (부모 노드의 자식 노드 리스트 중 마지막 자식노드에 삽입) prepend (첫 자식노드 앞에 삽입) 사용 예 let testBox = document.createElement('div')// tag명 testBox.classList.add('.commandBox')// id, class 명 testBoxinnerHTML = comment.user// comment 파라메타에 속한 user testBox.textContent = comment.user// comme.. 2020. 7. 6. DOM 조작 (<template> 태그) HTML 조각을 HTML 내에 정의할 수 있음 태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML 조각 마크업(HTML)과 구현(JavaScript)의 구분이 보다 더 철저 HTML 변경 후 변경 전 JavaScript let target = document.querySelector('#target'); let template = document.querySelector('#Will-be-rendered'); // #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사 let newContent = document.importNode(template.content, true); // target 내용을 비웁니다 target.innerHTML = '.. 2020. 7. 6. DOM 조작 (메소드) innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있음 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점 HTML 변경 전 JavaScript let target = document.querySelector('#target'); let newSpan = document.createElement('SPAN');// SPAN 엘리먼트 생성 newSpan.innerHTML = '변경 후'; target.appendChild(newSpan);// target 아래 > newSpan 엘리먼트 추가 HTML 출력 결과 변경 전 변경 후 DOM (메소드) 삭제 HTML 변경 전 JavaScript let target = document.querySelector('#t.. 2020. 7. 6. DOM 조작 (inner HTML) innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성 HTML 태그를 입력할 수도 있음 가장 쓰기 쉬운 속성이지만, 느리고 보안 위협이 있음. (textContent가 안전) HTML 변경 전 JavaScript let target = document.querySelector('#target'); target.innerHTML = `변경 후`; let target = document.querySelector('.target'); target.innerHTML = `변경 후`; // #id , .class HTML 출력 결과 변경 후 2020. 7. 6. 이전 1 ··· 72 73 74 75 76 77 78 ··· 83 다음