답변:
나는 그 차이가 거의 자명하다고 생각합니다. 그리고 테스트하는 것은 매우 사소한 일입니다.
jQuery.html()문자열을 HTML로 jQuery.text()취급하고 내용을 텍스트로 취급
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").html('<a href="example.html">Link</a><b>hello</b>');
$("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>명확하지 않을 수있는 차이점은 jQuery API 설명서에 설명되어 있습니다.
.html () 문서에서 :
이
.html()방법은 XML 문서에서 사용할 수 없습니다.
그리고 .text () 문서에서 :
이
.html()방법 과 달리.text()XML 및 HTML 문서 모두에서 사용할 수 있습니다.
$(function() {
$("#div1").html('<a href="example.html">Link</a><b>hello</b>');
$("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>((필요한 경우 업데이트하십시오.이 답변은 Wiki입니다))
.text()거나 .html()?답 : .html() 더 빠릅니다! 모든 질문에 대해서는 "행동 테스트 키트"를 참조 하십시오. .
결론적으로 "텍스트 만"인 경우 html()method를 사용하십시오 .
참고 : 이해가되지 않습니까? 이 .html()함수는에 대한 래퍼 .innerHTML일 뿐이지 만 .text()jQuery 함수에 "엔티티 필터"를 추가하면 이 필터는 자연스럽게 시간을 소비합니다.
좋아, 당신이 정말로 성능을 원한다면 ... 순수한 자바 스크립트 를 사용 하여 nodeValue속성으로 텍스트를 직접 대체하십시오 . 벤치 마크 결론 :
.html()는 ~보다 2 배 빠릅니다 .text()..innerHTML는 ~보다 3 배 빠릅니다 .html()..nodeValue는 ~ ~ 50 배 .html(), ~ ~ 100 배, ~ .text()~ 20 배 .innerHTML입니다.추신 : .textContent속성은 DOM-Level-3에 도입되었으며 DOM .nodeValue-Level-2이며 더 빠릅니다 (!).
참조 이 완료 벤치 마크 :
// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++)
$("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++)
$("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());
// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++)
document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());nodeValue속성 을 설정하면 ">"가 "& lt;"등으로 변환됩니다.
.text()~보다 7 배 빠름 .html()). 소스 코드 : codepen.io/damhonglinh/pen/vGpQEO . 1500 개 요소로 테스트했습니다. .html()~ 220ms .text()걸렸고 ~ 30ms 걸렸습니다.
첫 번째 예제는 HTML을 실제로 포함하는 div반면 두 번째 예제는 요소 관련 문자를 해당 문자 엔티티 로 대체하여 텍스트를 이스케이프하여 문자 그대로 표시합니다 (예 : HTML은 렌더링되지 않음 으로 표시됨 ).
.text()함수에서 모두 <가로 대체 됨을 의미합니다 <. 따라서 .html()브라우저에는 링크와 굵은 텍스트 .text()가 표시되고 브라우저에는 모든 것이 텍스트로 표시되고 링크 나 굵은 텍스트가 표시되지 않습니다.
text()방법은 그것으로 전달되는 모든 HTML을 엔티티 - 이스케이프합니다. text()페이지를 보는 사람들에게 표시 될 HTML 코드를 삽입 할 때 사용 하십시오.
기술적으로 두 번째 예는 다음을 생성합니다.
<a href="example.html">Link</a><b>hello</b>브라우저에서 다음과 같이 렌더링됩니다.
<a href="example.html">Link</a><b>hello</b>첫 번째 예제는 실제 링크 및 일부 굵은 텍스트로 렌더링됩니다.
실제로 둘 다 다소 비슷해 보이지만 사용 목적이나 달성하려는 의도에 따라 상당히 다릅니다.
.html()html 요소가있는 컨테이너에서 작동하는 데 사용 합니다..text()일반적으로 별도의 열기 및 닫기 태그가있는 요소의 텍스트를 수정 하는 데 사용.text() 메소드는 양식 입력 또는 스크립트에서 사용할 수 없습니다.
.val() 입력 또는 텍스트 영역 요소.html() 스크립트 요소의 가치.html 컨텐츠를 선택 .text()하면 html 태그가 html 엔티티로 변환됩니다.
.text() XML 및 HTML 문서 모두에서 사용할 수 있습니다..html() html 문서에만 해당됩니다.동작 차이를 보려면 jsfiddle에서이 예제를 확인하십시오.
값을 간단한 텍스트로 표시하려면 .text (…)를 사용하십시오.
값을 html 형식의 텍스트 (또는 HTML 내용)로 표시하려는 경우 .html (…)을 사용하십시오.
텍스트 (예 : 입력 컨트롤에서 오는)에 HTML에서 특별한 의미를 갖는 문자 / 태그가 포함되어 있지 않은지 확실하지 않으면 반드시 .text (...)를 사용해야 합니다. 이것은 텍스트가 올바르게 표시되지 않을 수 있기 때문에 정말로 중요 하지만 원하지 않는 JS 스크립트 스 니펫 (예 : 다른 사용자 입력에서 오는)이 활성화 될 수도 있습니다 .
기본적으로 $ ( "# div"). html은 element.innerHTML을 사용하여 내용을 설정하고 $ ( "# div"). text (아마도) element.textContent를 사용합니다.
http://docs.jquery.com/Attributes/html :
Set the html contents of every matched elementhttp://docs.jquery.com/Attributes/text :
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML
entities).$ ( '. div'). html (val) 은 선택된 모든 요소의 HTML 값을 설정하고 $ ( '. div'). text (val) 은 선택된 모든 요소의 텍스트 값을 설정합니다.
그것들이 각각 Node # textContent 및 Element # innerHTML에 해당한다고 생각합니다 . (Gecko DOM 참조).
다른 점은 .html()HTML로 평가 .text()하고 텍스트로 평가 하는 것입니다.
html HTML 블록을 고려하십시오
<div id="mydiv">
<div class="mydiv">
This is a div container
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
a text after ul
</div>
</div>JS
var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'.text()HTML 태그 사이에 실제 텍스트를 제공합니다. 예를 들어, p태그 사이의 단락 텍스트 . 주목해야 할 점은 $선택기로 대상 요소의 모든 텍스트와 선택한 요소의 자식 요소에있는 모든 텍스트를 제공한다는 것입니다. 여러 경우 그래서 pbody 요소의 내부 텍스트 태그를하고 당신이 할 $(body).text(), 당신은 얻을 것이다 모든 모든 단락에서 텍스트를. ( p태그 자체가 아닌 텍스트 만 해당 )
.html()텍스트 와 태그를 제공합니다. 그래서 $(body).html()기본적으로 당신에게 당신의 전체 페이지의 HTML 페이지를 제공합니다
.val()value와 같은 속성 을 가진 요소 에 적용됩니다 input. 이 input포함 된 텍스트 나 HTML을 가지고 있지 않으며, 따라서 .text()및 .html()모두 될 것입니다 null위해 input요소.
차이점은 text()HTML 태그가 작동하지 않는 HTML 태그 를 삽입하는 것입니다.
$('#output').html('You are registered'+'<br>' +' '
+ 'Mister'+' ' + name+' ' + sourname ); }출력 :
You are registered <br> Mister name sourname교체 text()로html()
산출
You are registered
Mister name sourname 그런 다음 태그가 <br>작동합니다html()
text(). 첫 번째 스 니펫은을 사용해야 합니다.
text()방법이 더 빠릅니다 ?? 얼마예요?