jQuery에서 text () 및 html () 함수의 차이점은 무엇입니까?
$("#div").html('<a href="example.html">Link</a><b>hello</b>');vs
$("#div").text('<a href="example.html">Link</a><b>hello</b>');답변
나는 그 차이가 거의 자명하다고 생각합니다. 그리고 테스트하는 것은 매우 사소한 일입니다.
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>http://jsfiddle.net/hossain/sUTVg/의
답변
((필요한 경우 업데이트하십시오.이 답변은 Wiki입니다))
하위 질문 : 텍스트 만있을 때 더 빠르 .text()거나 .html()?
답 : .html() 더 빠릅니다! 모든 질문에 대해서는 “행동 테스트 키트”를 참조 하십시오. .
결론적으로 “텍스트 만”인 경우 html()method를 사용하십시오 .
참고 : 이해가되지 않습니까? 이 .html()함수는에 대한 래퍼 .innerHTML일 뿐이지 만 .text()jQuery 함수에 “엔티티 필터”를 추가하면 이 필터는 자연스럽게 시간을 소비합니다.
좋아, 당신이 정말로 성능을 원한다면 … 순수한 자바 스크립트 를 사용 하여 nodeValue속성으로 텍스트를 직접 대체하십시오 . 벤치 마크 결론 :
- jQuery
.html()는 ~보다 2 배 빠릅니다.text(). - 순수 JS ‘
.innerHTML는 ~보다 3 배 빠릅니다.html(). - 순수 JS ‘
.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());답변
첫 번째 예제는 HTML을 실제로 포함하는 div반면 두 번째 예제는 요소 관련 문자를 해당 문자 엔티티 로 대체하여 텍스트를 이스케이프하여 문자 그대로 표시합니다 (예 : HTML은 렌더링되지 않음 으로 표시됨 ).
답변
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()(다른 사람이 그냥 언급했지만 .text()데이터를 탈출).
.text()사용자가 볼 수있는 데이터 / 텍스트 인 DOM의 데이터를 업데이트하려는 경우 항상 사용하는 것이 좋습니다 .
.html() div 내에서 HTML 콘텐츠를 가져 오는 데 주로 사용해야합니다.
답변
값을 간단한 텍스트로 표시하려면 .text (…)를 사용하십시오.
값을 html 형식의 텍스트 (또는 HTML 내용)로 표시하려는 경우 .html (…)을 사용하십시오.
텍스트 (예 : 입력 컨트롤에서 오는)에 HTML에서 특별한 의미를 갖는 문자 / 태그가 포함되어 있지 않은지 확실하지 않으면 반드시 .text (…)를 사용해야 합니다. 이것은 텍스트가 올바르게 표시되지 않을 수 있기 때문에 정말로 중요 하지만 원하지 않는 JS 스크립트 스 니펫 (예 : 다른 사용자 입력에서 오는)이 활성화 될 수도 있습니다 .
