innerHTML 대 innerText

.innerHTML 또는 .innerText 를 사용해야 할지 확신이 서지 않는다면 혼자가 아닙니다! 이 둘을 구별하는 것은 많은 초보 개발자가 DOM을 조작하려고 할 때 어려움을 겪는 것입니다. 두 속성의 차이점과 노련한 개발자가 조심스럽게 innerHTML에 접근하는 이유에 대해 알아보십시오.

.innerHTML

InnerHTML은 개발자가 DOM 내에서 요소의 HTML 정보를 동적으로 조작할 수 있도록 하는 JavaScript 속성입니다. 이 속성은 요소의 내부 텍스트를 설정하는 데 사용할 수 있지만 속성을 설정하고 서식 지정 지침을 제공하는 데 사용할 수도 있습니다. 아래 예를 살펴보겠습니다.

const div = document.createElement("div")
div.innerHTML = "<p id="p1" class="paragraph">innerHTML is a powerful tool!</p>"

여기서는 document.createElement를 사용하여 <div> 요소를 만듭니다. 그런 다음 innerHTML을 사용하여 <p> 내에서 ID가 "p1"인 <div> 요소를 생성하도록 JavaScript에 지시합니다. 또한 innerHTML을 사용하여 새로 만든<p> 요소의 텍스트 콘텐츠를 설정합니다.

페이지가 로드되면 innerHTML 속성을 통해 JavaScript가 <div> 에 포함하려는 모든 것을 인식할 수 있습니다. JavaScript는 "innerHTML은 강력한 도구입니다!"로 렌더링innerHTML is a powerful tool!합니다.

.innerText

InnerText는 개발자가 DOM 내에서 요소의 내부 텍스트 정보를 동적으로 조작할 수 있도록 하는 JavaScript 속성입니다. 이 속성은 요소의 내부 텍스트 콘텐츠를 설정하는 데 사용할 수 있지만 속성을 설정하거나 서식 지정 지침을 제공하는 데 사용할 수는 없습니다. innerText를 사용하여 위의 예를 다시 살펴보겠습니다.

const div = document.createElement("div")
const p = document.createElement("p")
div.append(p)
p.id = "p1"
p.className = "paragraph"
p.innerText = "innerHTML is a powerful tool!"

여기서는 document.createElement를 사용하여 <div> 요소와 <p> 요소를 모두 생성합니다. 그런 다음 div.append를 사용하여 <p> 요소를 <div> 요소에 추가하고 p.id를 사용하여 <p> 요소의 ID를 설정합니다. 마지막으로 innerText를 사용하여 <p> 요소의 텍스트 콘텐츠를 설정합니다.

페이지가 로드되면 innerHTML is a powerful tool!가 "innerHTML은 강력한 도구입니다!"로 렌더링됩니다.

비교

innerText 예제가 innerHTML 예제와 동일한 목표를 달성했지만 그렇게 하려면 몇 단계가 더 필요하다는 것을 알 수 있습니다. 왜 그런지 살펴보겠습니다.

innerHTML 예제에서는 innerHTML을 사용하여 <p> 요소를 만들고 클래스와 ID를 설정하고 <div> 에 추가하고 <p> 의 텍스트 콘텐츠를 설정했습니다. innerHTML을 사용하여 <p> 내에서 직접 <div>를 생성했기 때문에 innerText 예제에서 했던 것처럼 div.append를 사용할 필요가 없었습니다.

마찬가지로 innerHTML을 사용하여 이러한 속성을 HTML 파일에 표시되는 것처럼 <p> 태그 안에 직접 배치하여 <p> 값의 클래스 이름과 ID를 설정했습니다. 이 때문에 innerText 예제에서처럼 p.id 또는 p.className를 사용할 필요가 없었습니다.

테이크아웃

우리는 innerText와 innerHTML을 사용하여 DOM을 조작하는 방법을 살펴보았습니다. 또한 innerText 속성의 제한 사항을 살펴보고 innerHTML 속성과 비교할 때 이 속성에 추가 단계가 필요한 이유를 살펴보았습니다. 이제 개발자가 항상 innerHTML 사용을 선택하지 않는 이유에 대해 논의해 보겠습니다.

배운 것처럼 innerHTML에는 요소를 만들고 특성을 설정하는 고유한 기능이 있습니다. 안타깝게도 원하든 원하지 않든 쉽게 제거할 수 있습니다! innerText는 요소의 텍스트 내용만 수정하지만 innerHTML은 요소의 내부 텍스트, 자식 노드 및 속성을 수정한다는 점을 기억하세요. 이 때문에 innerHTML을 사용할 때 주의를 기울이고 데이터의 출처가 확실하지 않은 경우 innerText를 선택하는 것이 중요합니다.