innerText vs innerHtml vs 레이블 vs 텍스트 vs textContent vs outerText

innerText vs innerHtml vs 레이블 vs 텍스트 vs textContent vs outerText

---

Javascript로 채워진 드롭 다운 목록이 있습니다.

로드시 표시 할 기본값을 결정하는 동안 다음 특성이 정확히 동일한 값을 나타냄을 깨달았습니다.

• innerText
• innerHtml
• label
• text
• textContent
• outerText

내 자신의 연구에 따르면 벤치 마킹 테스트 또는 몇 가지 간의 비교가 있지만 전부는 아닙니다.

나는 내 자신의 상식을 사용하고 동일한 결과를 제공 할 때 하나 또는 다른 것을 선택할 수 있지만 데이터가 변경되면 이것이 좋은 생각이 아닐 것이라고 우려합니다.

나의 발견은 :

• innerText 값을있는 그대로 표시하고 포함될 수있는 HTML 형식을 무시합니다.
• innerHTML 값을 표시하고 HTML 형식을 적용합니다.
• label와 같은 것으로 보이 innerText므로 차이를 볼 수 없습니다
• textinnerTextjQuery 속기 버전 과 동일 하지만
• textContent같은 나타납니다 innerText하지만 (예 : 서식 계속 \n)
• outerText 같은 것으로 보인다 innerText

내 연구 단지 나는 단지 내가 생각할 또는 게시 무엇을 읽을 수 있는지 테스트 할 수 있습니다으로 지금까지 저를 취할 수 있습니다 하나 확인 내 연구가 올바른지하지만 아무것도 특별 대해이있는 경우 label및 outerText?

---

에서 MDN :

Internet Explorer는 element.innerText를 도입했습니다. 의도는 [textContent]와 거의 동일하지만 몇 가지 차이점이 있습니다.

• textContent는 <script>및 <style>elements를 포함한 모든 요소의 컨텐츠를 가져 오지만, IE와 동등한 속성 인 innerText는 그렇지 않습니다.

• innerText도 스타일을 인식하고 숨겨진 요소의 텍스트를 반환하지 않지만 textContent는 반환합니다.

• innerText는 CSS 스타일을 알고 있으므로 리플 로우를 트리거하지만 textContent는 그렇지 않습니다.

따라서 innerTextCSS에 의해 숨겨진 텍스트는 포함되지 않지만 포함 textContent됩니다.

innerHTML은 이름이 나타내는 HTML을 반환합니다. 종종 요소 내에서 텍스트를 검색하거나 쓰려면 innerHTML을 사용합니다. 대신 textContent를 사용해야합니다. 텍스트가 HTML로 구문 분석되지 않으므로 성능이 향상 될 수 있습니다. 또한 이것은 XSS 공격 경로를 피합니다.

이를 놓친 경우 더 명확하게 반복하겠습니다 . 요소 내에 HTML을 삽입하려는 의도가없고 삽입하는 HTML에 악성 콘텐츠가 포함되지 않도록 필요한 예방 조치를 취하지 않은 경우 사용 하지 마십시오 . 텍스트 만 삽입하려면을 사용 하거나 IE8 및 이전 버전을 지원해야하는 경우 기능 검색을 사용하여 및 사이를 끕니다 ..innerHTML.textContent.textContent.innerText

속성이 너무 많은 주된 이유는 브라우저마다 원래 이러한 속성의 이름이 다르고 여전히 모든 브라우저에 대한 완벽한 브라우저 지원이 없기 때문입니다. jQuery를 사용하는 경우 .text()브라우저 간 차이를 완화하도록 설계되었으므로이를 고수해야합니다 . *

다른 것 중 일부의 경우 : outerHTML는 기본적으로와 동일하지만 innerHTML, 속한 요소의 시작 및 끝 태그를 포함한다는 점이 다릅니다. 나는 많은 설명을 찾을 수없는 것 같습니다 outerText. 아마도 이것이 모호한 유산 일 것이므로 피해야한다고 생각합니다.

---

드롭 다운 목록은 Option객체 모음으로 구성 되므로 .text속성을 사용 하여 요소의 텍스트 표현을 검사 해야합니다.

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.text.innerTextJQuery 속기 버전 과 동일 하지만

맞지 않습니다. $(element).text()jQuery 버전이고 element.text속성 액세스 버전입니다.

---

JLRishe의 다른 훌륭한 답변에 대한 부록 :

innerText와 outerText가 모두 존재하는 이유는 innerHTML 및 outerHTML과의 대칭 때문입니다. 속성 을 할당 할 때 중요 합니다.

eHTML 코드를 가진 요소가 있다고 가정하십시오 <b>Lorem Ipsum</b>.

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

---

textContent 포맷하지 않습니다 (\ n)

---

특정 브라우저를 대상으로하는 경우 브라우저 호환성 http://www.quirksmode.org/dom/html/을 참조하십시오 . 그들 모두 자신의 일을하는 것처럼 보입니다. 그래서 주위를 둘러 보지 않으려면 JQuery .text () ( http://api.jquery.com/text/ ) 를 사용하는 것이 좋습니다 .

참고 URL : https://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext