Programing

jQuery : text ()와 html ()의 차이점은 무엇입니까?

lottogame 2020. 3. 29. 08:38

jQuery : text ()와 html ()의 차이점은 무엇입니까?

jQuery에서 text () 및 html () 함수의 차이점은 무엇입니까?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

$("#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 함수에 "entity filter"를 추가하면 이 필터는 자연스럽게 시간을 소비합니다.

좋아, 당신이 정말로 성능을 원한다면 ... 순수한 자바 스크립트 를 사용 하여 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 코드를 삽입하려는 경우에 사용 하십시오.

기술적으로 두 번째 예는 다음을 생성합니다.

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

브라우저에서 다음과 같이 렌더링됩니다.

<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 스크립트 스 니펫 (예 : 다른 사용자 입력에서 오는)이 활성화 될 수도 있습니다 .

기본적으로 $ ( "# div"). html은 element.innerHTML을 사용하여 내용을 설정하고 $ ( "# div"). text (아마도) element.textContent를 사용합니다.

http://docs.jquery.com/Attributes/html :

Set the html contents of every matched element

http://docs.jquery.com/Attributes/text :

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML 
entities).

$ ( '. div'). html (val) 은 선택된 모든 요소의 HTML 값을 설정하고 $ ( '. div'). text (val) 은 선택된 모든 요소의 텍스트 값을 설정합니다.

jQuery.text ()에 대한 API 문서

jQuery.html () 용 API 문서

그것들이 각각 Node # textContent 및 Element # innerHTML에 해당한다고 생각합니다 . (Gecko DOM 참조).

간단히 말해서.

html ()-내부 html (html 태그 및 텍스트)을 가져옵니다.

text ()-안에있는 경우에만 텍스트를 가져옵니다 (텍스트 만)

.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 함수는 값을 일반 텍스트로 설정하거나 검색합니다. 그렇지 않으면 HTML 함수는 값을 변경하거나 수정하기 위해 HTML 태그로 값을 검색하거나 검색합니다. 내용을 변경하려면 text ()를 사용하십시오. 그러나 마크 업을 변경해야하는 경우 hmtl ()을 사용해야합니다.

6 년이 지나면 제게는 해답이됩니다.

다른 점은 .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>

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'

그림은이 링크 http://api.jquery.com/text/에 있습니다.

참고 URL : https://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html

'Programing' 카테고리의 다른 글

하나의 디렉토리에있는 모든 파일을 반복 (0)	2020.03.29
HTML 텍스트 필드에서 맞춤법 검사 사용 안함 (0)	2020.03.29
NSUserDefaults에 사용자 정의 객체를 저장하는 방법 (0)	2020.03.29
jsdoc에서“객체”인수를 설명하는 방법? (0)	2020.03.29
속성과 같은 dict 키에 액세스합니까? (0)	2020.03.29

현재글jQuery : text ()와 html ()의 차이점은 무엇입니까?

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

여행, 관광, java, 극장순위, Javascript, c++, 무비순위, 가족나들이, JQuery, 공연, 자바, 축제, 놀거리, c#, 볼거리, 뮤지컬, spring, Spring3, 행사, 연극,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

lottogame

jQuery : text ()와 html ()의 차이점은 무엇입니까?

jQuery : text ()와 html ()의 차이점은 무엇입니까?

하위 질문 : 텍스트 만있을 때 더 빠르 `.text()`거나 `.html()`?

사용처 :

사용하지 않는 곳 :

차:

예

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

jQuery : text ()와 html ()의 차이점은 무엇입니까?

jQuery : text ()와 html ()의 차이점은 무엇입니까?

하위 질문 : 텍스트 만있을 때 더 빠르 .text()거나 .html()?

사용처 :

사용하지 않는 곳 :

차:

예

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바

하위 질문 : 텍스트 만있을 때 더 빠르 `.text()`거나 `.html()`?