레이블 요소의 내부 텍스트를 변경하기 위해 일반 js를 사용하고 있으며 innerHTML 또는 nodeValue 또는 textContent를 사용해야하는 근거를 확신하지 못했습니다. 새 노드를 만들거나 HTML 요소 등을 변경할 필요가 없습니다. 텍스트 만 바꾸십시오. 코드의 예는 다음과 같습니다.
var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works
myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.
myLabel.textContent = "Some new label text!"; // this also works.jQuery 소스를 살펴본 결과 nodeValue를 정확히 한 번만 사용하지만 innerHTML 및 textContent를 여러 번 사용합니다. 그런 다음 firstChild.nodeValue가 상당히 빠르다는 것을 나타내는이 jsperf 테스트를 발견했습니다. 적어도 그것이 의미하는 바입니다.
firstChild.nodeValue가 훨씬 빠르면 캐치가 무엇입니까? 널리 지원되지 않습니까? 다른 문제가 있습니까?
답변
MDN에서 textContent / innerText / innerHTML의 차이점
그리고 innerText / nodeValue에 대한 Stackoverflow 답변.
요약
- innerHTML은 내용을 HTML로 구문 분석하므로 시간이 더 오래 걸립니다.
- nodeValue 는 일반 텍스트를 사용하고 HTML을 구문 분석하지 않으며 더 빠릅니다.
- textContent 는 일반 텍스트를 사용하고 HTML을 구문 분석하지 않으며 더 빠릅니다.
- innerText 스타일을 고려합니다. 예를 들어 숨겨진 텍스트는 표시되지 않습니다.
innerTextcaniuse 에 따르면 FireFox 45까지 파이어 폭스에는 존재하지 않았지만 모든 주요 브라우저에서 지원됩니다.
답변
.textContent출력 text/plain하는 동안 .innerHTML출력 text/html합니다.
빠른 예 :
var example = document.getElementById('exampleId');
example.textContent = '<a href="https://google.com">google</a>';
출력 : <a href=”http://google.com”> google </a>
example.innerHTML = '<a href="https://google.com">google</a>';
출력 : 구글
첫 번째 예제 text/plain에서 브라우저가 type 출력을 구문 분석하지 않고 전체 내용이 표시되는 것을 볼 수 있습니다. 유형의 출력은 text/html브라우저에 표시하기 전에 구문 분석하도록 지시합니다.
답변
내가 잘 알고 작업하는 두 가지는 innerHTML과 textContent 입니다.
내가 사용 하는 TextContent을 난 그냥 그렇게 같은 단락 또는 제목의 텍스트를 변경하려면 :
var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')
setTimeout(function () {
heading.textContent = 'My New Title!'
paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)em { font-style: italic; }<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>따라서 textContent 는 텍스트를 변경하지만 결과에서 일반 텍스트로 표시되는 태그에서 알 수 있듯이 HTML을 구문 분석하지 않습니다.
HTML을 파싱하려면 다음 과 같이 innerHTML 을 사용 합니다.
var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')
setTimeout(function () {
heading.innerHTML = 'My <em>New</em> Title!'
paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)em { font-style: italic; }<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>두 번째 예는 DOM 요소의 innerHTML 속성에 할당 한 문자열 을 HTML로 구문 분석합니다 .
이것은 훌륭하고 큰 보안 취약점입니다. 🙂
(보안에 대해 알고 싶다면 XSS를 찾으십시오)
답변
innerText 는 텍스트를 선택하고 복사하면 얻을 수있는 것입니다. 렌더링되지 않은 요소는 innerText에 없습니다.
textContent 는 하위 트리 의 모든 TextNode 값을 연결 한 것 입니다. 렌더링 여부.
차이점을 자세히 설명 하는 훌륭한 게시물 이 있습니다.
innerHTML 또는 textContent와 비교할 때 innerHTML 은 완전히 다르므로 포함하지 말아야하며 이유를 알아야합니다.
답변
[참고 :이 게시물은 사람들에게 무엇을해야하는지 알려주는 것보다 누군가에게 도움이 될 수있는 특정 데이터를 공유하는 것에 관한 것입니다.]
누군가가 오늘 가장 빠른 것을 궁금해하는 경우 :
https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent
& https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( 두 번째 테스트의 경우 범위의 내용은 일반 텍스트이며 내용에 따라 결과가 변경 될 수 있습니다)
.innerHtml순수한 속도면에서 가장 큰 승자 인 것 같습니다 !
(참고 : 속도에 대해서만 이야기하고 있습니다. 사용할 기준을 선택하기 전에 다른 기준을 찾고 싶을 수도 있습니다!)
답변
Element.innerHTML 속성을 set로 또는 get요소의 HTML 코드
예 : 우리는 <h1>태그와 강한 스타일을 가지고 있습니다 :
<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>
위해 get요소의 콘텐츠 ID, 우리는 할 것 “myHeader”동일한 동일있다 :
var element = document.getElementById("myHeader");
element.innerHTML반환 결과 :
<strong>My Header</strong> Normal Text`이 요소에 대한 새로운 내용 (값)을 “설정”하기 위해 코드는 다음과 같습니다.
Element.innerHTML = "My Header My Text";따라서이 속성은 일반 텍스트와 함께 작동 할뿐만 아니라 HTML 코드를 전달하거나 복사하기위한 것입니다.
=> 우리는 그것을 사용해서는 안됩니다.
그러나 많은 프로그래머 (나 자신을 포함하여)는이 속성을 사용하여 웹 페이지에 텍스트를 삽입하며이 방법은 잠재적 인 위험이 따릅니다.
- 잘못된 작업 : 각 텍스트 만 삽입하면 삽입 된 요소의 다른 모든 HTML 코드가 삭제되는 경우가 있습니다.
- 보안을 위해 : 물론 HTML5 표준으로 인해 태그 내부에서 명령 행이 실행되지 않기 때문에 태그를 사용하는 데 여전히 문제가없는 경우에도 위의 두 예제는 완전히 무해합니다. innerHTML 속성을 통해 웹 페이지에 삽입 될 때 여기이 규칙을 참조 하십시오 .
따라서 innerHTML일반 텍스트를 삽입 할 때는 사용 하지 않는 것이 좋습니다 textContent. 이 textContent속성은 전달하는 코드가 HTML 구문이라는 것을 이해하지 못하고 100 % 텍스트에 불과합니다.
textContent위 예제에서 사용하면 결과가 반환됩니다 .
My Header My Text답변
