1단계 블로그

Flatiron School에서 1단계를 완료했습니다! 이것은 확실히 도전이었지만 완수한 것이 자랑스럽습니다. 지난 3주 동안 너무 빨리 지나갔고 확실히 많은 것을 배웠다고 말할 수 있습니다. 나는 내 코호트를 알게되고 그들과 함께 배우는 것을 즐겼습니다.

1단계에서 우리는 JavaScript의 기초에 대해 배웠습니다. 2주 동안 DOM, 이벤트 리스너 및 가져오기 요청에 대해 학습한 후 학급은 작동하는 웹 사이트를 만드는 데 자신의 기술을 사용할 수 있었습니다. 내 웹사이트를 위해 내 파트너와 나는 사람들이 최고 평점 및 신작 영화에 대한 설명을 읽을 수 있는 영화 리뷰 웹사이트를 만들었습니다. 내 프로젝트의 일부에서 json 파일을 가져와서 dom에 정보를 표시해야 했습니다. 그렇게 하려면 innerText, innerHTML 또는 innerTEXT를 사용해야 했습니다. 그 중 3개를 사용하여 작업을 완료할 수 있었지만 여전히 어느 것을 사용해야 할지 혼란스러웠습니다. 그래서 여기에 당신의 삶을 더 쉽게 만드는 세 가지에 대한 분석이 있습니다!

이것은 샘플 코드가 될 것입니다.
div 요소를 사용하고 id를 exampleCode로 설정했습니다. 굵은 코드 태그가 있습니다. bold 태그는 그 안의 내용을 굵게 만들고 code 태그는 그 안의 내용을 모노스페이스 글꼴로 표시합니다.

<div id=‘exampleCode>

  This world is <bold>bold</bold>. There is a space       <code>here</code>
  </div>

텍스트를 표시하려면 요소를 선언한 다음 innerHTML, innerText 및 textContent를 사용하여 호출할 수 있습니다.

const exampleCode = document.getElementById('블로그 테스트');
exampleCode.innerHTML
exampleCode.innerText
exampleCode.텍스트 콘텐츠

.innerHTML을 사용하여 코드를 호출하면 this가 반환됩니다.

"This world is <bold>bold</bold>. There is a space       <code>here</code>"

.innerHTML은 및 . Use this when you want to see the html content of a code. 에서 볼 수 있듯이 코드 내에서 html 마크업을 반환합니다.

.textContent를 사용하여 코드를 호출하면 이를 반환합니다.

 "This world is bold. There is a space       here"

.textContent는 html 마크업이 적용된 이 코드를 반환합니다. "공백"과 "here"사이에 추가된 여백이 적용된 것을 확인할 수 있습니다. 서식이 적용된 요소의 값을 보고 싶을 때 사용하세요.

.innerText를 사용하여 코드를 호출하면 this가 반환됩니다.

"This world is bold. There is a space here"

.innerText는 html 마크업이 적용된 코드를 반환하지만 코드의 추가 공백은 무시됩니다. 형식을 무시하고 요소의 값을 보고 싶을 때 이것을 사용하십시오.

참조 목록
https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc
https://www.w3schools.com/