I'm a Fig, Not a Pig

목차 1. innerHTML 2. innerText 3. textContent 4. 정리 매번 찾아보는 셋의 차이점.. 텍스트를 읽어오고 설정할 수 있다는 점이 비슷하지만 조금씩 다른 차이가 있어서 이 차이를 아는게 중요하다. 1. innerHTML 먼저 innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML 마크업을 읽어오거나 설정 할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다. // html 코드와 함께 작성 가능 document.documentElement.innerHTML = "innerHTML" // 스타일 적용 document.documentElement.innerHTML =..

innerHTML, innerText, textContent 이 셋의 차이점 찾아보다가 innerHTML의 위험성이라는 글을 보게 되었고.. innerHTML만 써왔던 사람으로서 insertAdjacentHTML의 필요성을 몰랐기 때문에 정리 해보려 한다. 따라서 이번 포스팅에서는 innerHTML의 위험성과 더불어 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML메서드에 대해 다룰 것이다.   1. innerHTMLinnerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용한다.  구문element.innerHTML( text )  예시아래는 간단한 HTML 마크업이다. ca..