programing

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

mailnote 2023. 6. 25. 20:25
반응형

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>
Live demo on http://jsfiddle.net/hossain/sUTVg/

((필요한 경우 업데이트하십시오. 이 답변은 Wiki입니다)

만 있을 때, 더 빠릅니까? Sub-Question: 텍트만있무더빠엇릅까니이때?.text()또는.html()?

예: .html()더 빠릅니다!모든 질문은 여기에서 "행동 테스트 키트"를 참조하십시오.

따라서 결론적으로 "텍스트만"인 경우에는 방법을 사용합니다.

참고: 말이 안 되나요?기억하세요..html()는 에함대래는한뿐다니입퍼일수▁▁wrapper의 래퍼일 입니다..innerHTML하지만 지금은.text()함수 jQuery는 "엔티티 필터"를 추가하며, 이 필터는 자연스럽게 시간을 소비합니다.

좋아요, 만약 당신이 정말로 성능을 원한다면...직접 텍스트에 액세스하려면 순수 Javascript를 사용합니다.nodeValue벤치마크 결론:

  • jQuery's.html() 2더빠보다 ~.text().
  • JS' 수순 JS'.innerHTML 3더빠보다 ~.html().
  • JS' 수순 JS'.nodeValue 50더빠보다 .html()~보다 100배 더 많은.text()보다 최대 20배 향상.innerHTML.

PS:.textContent DOM-Level-3과 함께 되었습니다..nodeValueDOM-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());

번째 을번예실제로제다는 입니다.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()스크립트 요소의 값입니다.

  • .text()합니다. html 파일 이름은 html입니다.

차이:

  • .text()XML 및 HTML 문서에서 모두 사용할 수 있습니다.
  • .html()HTML 문서 전용입니다.

jsfiddle에서 이 예제를 확인하여 작업의 차이를 확인합니다.

예

간 것이 합니다..text()1파운드가 .html()(다른 사람들이 방금 언급했지만,.text()데이터를 이스케이프합니다.

항상 사용하는 것이 좋습니다..text()사용자가 볼 수 있는 데이터/텍스트인 DOM의 데이터를 업데이트하려는 경우.

.html()div 에서 HTML 를 가져올 때 사용해야 합니다.

값을 단순 텍스트로 표시하려면 .text(…)를 사용합니다.

값을 HTML 형식의 텍스트(또는 HTML 내용)로 표시하려면 .html(…)을 사용합니다.

텍스트(예: 입력 컨트롤에서 오는 텍스트)에 HTML에서 특별한 의미가 있는 문자/태그가 포함되어 있지 않은지 확신할 수 없는 경우에는 .text(...)를 사용해야 합니다.텍스트가 제대로 표시되지 않을 수도 있지만 원하지 않는 JS 스크립트 스니펫(예: 다른 사용자 입력에서 오는 것)이 활성화될 수도 있기 때문에 매우 중요합니다.

.text()HTML 태그 사이에 있는 실제 텍스트를 제공합니다.를 들어, 예들어단, 의텍는트스락 에 있는 단락의 .p은 그태로 입니다. 흥미로운 점은 당신이 목표로 하는 요소의 모든 텍스트를 당신에게 줄 것이라는 것입니다.$선택기에 선택한 요소의 하위 요소에 있는 모든 텍스트를 추가합니다.그래서 만약 당신이 복수라면.p본문 요소 안에 텍스트가 있는 태그를 지정하고 다음 작업을 수행합니다.$(body).text()당신은 모든 단락에서 모든 텍스트를 얻을 것입니다. (텍스트만.p태그 자체입니다.)

.html()텍스트와 태그를 제공합니다.그렇게$(body).html() 페이지를합니다.

.val()▁a▁that▁have다▁for를 가진 요소에 작동합니다.value:input안 안input텍스트 또는 HTML이 포함되어 있지 않습니다..text()그리고..html()둘 다가 될 것입니다.null위해서input요소들.

기본적으로 $("#div").html은 element.inner를 사용합니다.HTML을 사용하여 콘텐츠를 설정하고 $("#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')는 선택한 모든 요소의 텍스트 값을 설정합니다.

jQuery.text()용 API 문서

jQuery.html()에 대한 API 문서

Node#textContent 및 Element#inner에 해당한다고 생각합니다.HTML. (Gecko DOM 참조).

간단히 말하면요.

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

text() - 내부에 있는 경우 텍스트만 가져옵니다(텍스트만).

점은 다른점입니다..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/ 에서 가져온 것입니다.

저는 제생차이은점태각 html그삽것에 html에 이라고 생각합니다.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

에 태그 다에태그음그▁tag그.<br>에서 작동하는.html()

텍스트 함수는 값을 일반 텍스트로 설정하거나 검색합니다. 그렇지 않으면 HTML 함수는 값을 HTML 태그로 설정하거나 검색하여 변경하거나 수정합니다.내용만 변경하려면 텍스트()를 사용합니다.하지만 마크업을 변경해야 한다면 hmtl()을 사용해야 합니다.

6년 후의 나에게 있어 그건 바보 같은 대답이야, 신경쓰지 마.

**difference between text()&& html() && val()...?
#Html code..
<select id="d">
<option>Hello</option>
<option>Welcome</option>
</select>
# jquery code..
$(document).ready(function(){
   $("#d").html();
   $("#d").text();
   $("#d").val();

});

가능할 때마다 HTML을 벗어날 때 .text()를 사용합니다. 특히 사용자 입력과 같은 신뢰할 수 없는 데이터를 추가하는 경우 .html()에는 몇 가지 xss 취약성이 있습니다.

var v = "&#x5168;&#x540D;";
$("#div").html(v); //display as "全名"
$("#div").text(v); //display as "&#x5168;&#x540D;"

text() – 이 메서드는 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.html() – 이 메서드는 선택한 요소의 내용을 설정하거나 반환합니다.여기 예를 참조하십시오. https://www.tutorialspoint.com/online_jquery_editor.php

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

반응형

'programing' 카테고리의 다른 글

Floating 앱 출시 후 Google 로그인이 작동하지 않음  (0) 2023.06.25
렌(제너레이터() 방법)  (0) 2023.06.25
IIS 7.5의 GZip 압축이 작동하지 않음  (0) 2023.06.25
값이 없는 테이블에 삽입하기 위한 구문?  (0) 2023.06.25
어떻게 하면 과거의 약속을 쉽게 고칠 수 있습니까?  (0) 2023.06.25

'programing'의 다른글

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

관련글

댓글

티스토리툴바