276

Sự khác biệt giữa các hàm text () và html () trong jQuery là gì?

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

đấu với

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

jquery dom

— Brettk
nguồn

2

Một câu hỏi không tự giải thích: khi chúng ta chỉ cần văn bản (không có thẻ html), text()phương pháp nhanh hơn ?? Bao nhiêu?

— Peter Krauss

347

Tôi nghĩ rằng sự khác biệt là gần như tự giải thích. Và nó siêu tầm thường để kiểm tra.

jQuery.html()coi chuỗi là HTML, jQuery.text()coi nội dung là văn bản

<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>

Một sự khác biệt có thể không quá rõ ràng được mô tả trong tài liệu API jQuery

Trong tài liệu cho .html () :

Các .html()phương pháp không có sẵn trong tài liệu XML.

Và trong tài liệu cho .text () :

Không giống như .html()phương thức, .text()có thể được sử dụng trong cả tài liệu XML và 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>

Mở rộng đoạn trích

Bản demo trực tiếp trên http://jsfiddle.net/hossain/sUTVg/

— Peter Bailey
nguồn

Cũng cần lưu ý rằng, chiều dài là khác nhau giữa hai là tốt. jsfiddle.net/sUTVg/458

— GreeKatrina

5

@aequalsb Tôi nhận ra rằng đây là một câu hỏi cũ, nhưng tôi phải lưu ý rằng việc mặc định sử dụng ọ.html () Ó là nguy hiểm vì văn bản được coi là HTML. Nếu bạn nhận được văn bản đó từ một tham số chuỗi, biểu mẫu, tiêu đề, URL hoặc bất kỳ nơi nào khác mà bạn có thể cung cấp hoặc chỉnh sửa văn bản, thì bạn đang mở rộng cho XSS.

— Canis

105

((vui lòng cập nhật nếu cần, câu trả lời này là Wiki))

Câu hỏi phụ: khi chỉ có văn bản, cái gì nhanh hơn, `.text()`hay `.html()`?

Trả lời: .html() là nhanh hơn! Xem ở đây một "bộ kiểm tra hành vi" cho tất cả các câu hỏi .

Vì vậy, để kết luận, nếu bạn có "chỉ một văn bản", hãy sử dụng html()phương thức.

Lưu ý: Không có ý nghĩa? Hãy nhớ rằng .html()hàm chỉ là một trình bao bọc .innerHTML, nhưng trong .text()hàm jQuery thêm một "bộ lọc thực thể" và bộ lọc này tự nhiên tiêu tốn thời gian.

Ok, nếu bạn thực sự muốn hiệu suất ... Sử dụng Javascript thuần để truy cập văn bản trực tiếp thay thế bởi thuộc nodeValuetính. Kết luận điểm chuẩn:

jQuery .html()nhanh hơn ~ 2 lần .text().
JS thuần túy ' .innerHTMLnhanh hơn ~ 3 lần .html().
JS thuần túy ' .nodeValuenhanh hơn ~ 50 lần so với .html(), ~ 100 lần so với .text()và ~ 20 lần so với .innerHTML.

PS: thuộc .textContenttính được giới thiệu với DOM-Level-3, .nodeValuelà DOM-Level-2 và nhanh hơn (!).

Xem điểm chuẩn hoàn chỉnh này :

// 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());

— Peter Krauss
nguồn

7

Nhưng nếu xử lý đầu vào không đáng tin cậy, bạn nên sử dụng văn bản () bất cứ khi nào có thể.

— Scott Simontis

@ScottSimontis khi bạn đặt thuộc nodeValuetính, nó biến đổi ">" thành "& lt;", v.v.

— Peter Krauss

Khi tôi "điểm chuẩn" với Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), kết quả ngược lại ( .text()dường như nhanh hơn ~ 7 lần .html()). Mã nguồn: codepen.io/damhonglinh/pen/vGpQEO . Tôi đã thử nghiệm với 1500 yếu tố; .html()mất ~ 220ms và .text()mất ~ 30ms.

— Linh Đàm

Xin chào @LinhDam. Hum ... sử dụng điểm chuẩn hoàn chỉnh , Firefox của tôi nói "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... Và Chrome của tôi nói "JQ TIMES (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... vì vậy cả hai (Firefox và Chrome) có cùng tỷ lệ thời gian .

— Peter Krauss

để trở thành một điểm chuẩn thực sự giữa văn bản () và html (), bộ chọn phải được thực hiện hoặc getEuityById hoặc $ ("# work") trong mọi trường hợp hoặc bạn sẽ được điểm chuẩn là $ ("# work") so với

— getEuityById

66

Ví dụ đầu tiên sẽ thực sự nhúng HTML vào divtrong khi ví dụ thứ hai sẽ thoát khỏi văn bản bằng cách thay thế các ký tự liên quan đến phần tử bằng các thực thể ký tự tương ứng của chúng để nó hiển thị theo nghĩa đen (nghĩa là HTML sẽ được hiển thị không được hiển thị).

— Andrew Hare
nguồn

1

Xin lỗi, tôi không hiểu lắm. Bạn có thể giải thích thêm. Cảm ơn

— Brettk

Bạn có nghĩa là ví dụ thứ 2 sẽ "mã hóa"? Nó đã được mã hóa, phải không?

— Brettk

@Brettk - Tôi đã nói "mã hóa" nhưng đó chỉ là một cú trượt ngón tay. Tôi đã thay đổi câu trả lời của tôi để phản ánh tốt hơn những gì tôi muốn nói.

— Andrew Hare

6

Ông có nghĩa là trong .text()chức năng, tất cả <sẽ được thay thế bằng <. Vì vậy, với .html()trình duyệt sẽ thấy một liên kết và một số văn bản in đậm, với .text()trình duyệt sẽ thấy mọi thứ là văn bản và không tạo ra một liên kết hoặc văn bản in đậm.

— Mottie

59

Các text()phương pháp thực thể thoát bất kỳ HTML được thông qua vào nó. Sử dụng text()khi bạn muốn chèn mã HTML sẽ hiển thị cho những người xem trang.

Về mặt kỹ thuật, ví dụ thứ hai của bạn tạo ra:

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

sẽ được hiển thị trong trình duyệt dưới dạng:

<a href="example.html">Link</a><b>hello</b>

Ví dụ đầu tiên của bạn sẽ được hiển thị dưới dạng một liên kết thực tế và một số văn bản in đậm.

— davidcl
nguồn

4

Điều này nên được bao gồm trong câu trả lời được chọn để giải thích những gì đang thực sự xảy ra.

— d512

27

Trên thực tế cả hai trông hơi giống nhau nhưng khá khác nhau, nó phụ thuộc vào cách sử dụng hoặc ý định của bạn những gì bạn muốn đạt được,

Sử dụng ở đâu:

sử dụng .html()để hoạt động trên các container có các phần tử html.
sử dụng .text()để sửa đổi văn bản của các phần tử thường có các thẻ mở và đóng riêng biệt

Trường hợp không sử dụng:

.text() phương pháp không thể được sử dụng trên đầu vào mẫu hoặc tập lệnh.
- .val() cho các yếu tố đầu vào hoặc textarea.
- .html() cho giá trị của một phần tử script.
Chọn nội dung html từ .text()sẽ chuyển đổi các thẻ html thành các thực thể html.

Sự khác biệt:

.text() có thể được sử dụng trong cả tài liệu XML và HTML.
.html() chỉ dành cho tài liệu html.

Kiểm tra ví dụ này trên jsfiddle để xem sự khác biệt trong hành động

Thí dụ

— Owais Qureshi
nguồn

1

Câu trả lời này là dễ hiểu nhất và được định dạng tốt nhất +1

— Katie

Khác biệt bw :: html (dữ liệu) là gì; & val (dữ liệu); @Owais Qureshi

— Đá quý

9

Lạ mà không ai đề cập đến phòng kịch bản lợi ích Site Cross of .text()qua .html()(Mặc dù những người khác đã chỉ đề cập đến việc .text()thoát dữ liệu).

Bạn luôn nên sử dụng .text()khi bạn muốn cập nhật dữ liệu trong DOM, đây chỉ là dữ liệu / văn bản để người dùng xem.

.html() nên được sử dụng chủ yếu để có được nội dung HTML trong một div.

— Nợ
nguồn

5

Sử dụng .text (Nhận) khi bạn có ý định hiển thị giá trị dưới dạng văn bản đơn giản.

Sử dụng .html (Hoài) khi bạn định hiển thị giá trị dưới dạng văn bản có định dạng html (hoặc nội dung HTML).

Bạn chắc chắn nên sử dụng .text (...) khi bạn không chắc chắn rằng văn bản của mình (ví dụ: đến từ điều khiển nhập liệu) không chứa các ký tự / thẻ có ý nghĩa đặc biệt trong HTML. Điều này thực sự quan trọng vì điều này có thể khiến văn bản sẽ không hiển thị đúng nhưng nó cũng có thể khiến đoạn mã script không mong muốn (ví dụ: đến từ đầu vào của người dùng khác) được kích hoạt .

— Adorjan Princz
nguồn

2

Về cơ bản, $ ("# div"). Html sử dụng phần tử.innerHTML để đặt nội dung và $ ("# div"). Text (có thể) sử dụng Element.textContent.

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

Set the html contents of every matched element

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

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

— Seth
nguồn

2

$ ('. div'). html (val) sẽ đặt các giá trị HTML của tất cả các thành phần được chọn, $ ('. div'). text (val) sẽ đặt giá trị văn bản của tất cả các thành phần được chọn.

Tài liệu API cho jQuery.text ()

Tài liệu API cho jQuery.html ()

Tôi đoán rằng chúng tương ứng với Node # textContent và Element # InternalHTML . (Tham khảo Gecko DOM).

— Michiel Kalkman
nguồn

2

Vâng trong thuật ngữ đơn giản.

html () - để có được html bên trong (thẻ html và văn bản).

văn bản () - để chỉ nhận văn bản nếu có bên trong (chỉ văn bản)

— Mustkeem K
nguồn

1

Sự khác biệt được .html()đánh giá là một html, đánh giá .text()như một văn bản.
Hãy xem xét một khối 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>

Mã não

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'

Hình minh họa là từ liên kết này http://api.jquery.com/text/

— Pascal Tovohery
nguồn

1

.text()sẽ cung cấp cho bạn văn bản thực tế ở giữa các thẻ HTML. Ví dụ, văn bản đoạn văn ở giữa pcác thẻ. Điều thú vị cần lưu ý là nó sẽ cung cấp cho bạn tất cả văn bản trong phần tử bạn đang nhắm mục tiêu với $bộ chọn của bạn cộng với tất cả văn bản trong các phần tử con của phần tử được chọn đó. Vì vậy, nếu bạn có nhiều pthẻ có văn bản bên trong phần tử cơ thể và bạn thực hiện a $(body).text(), bạn sẽ nhận được tất cả văn bản từ tất cả các đoạn. (Chỉ văn bản, không phải các pthẻ.)

.html()sẽ cung cấp cho bạn văn bản và các thẻ. Vì vậy, $(body).html()về cơ bản sẽ cung cấp cho bạn toàn bộ trang HTML của bạn

.val()hoạt động cho các phần tử có valuethuộc tính, chẳng hạn như input. An inputkhông chứa văn bản hoặc HTML và do đó .text()và .html()cả hai sẽ nulldành cho inputcác yếu tố.

— Madian Fabian
nguồn

0

Tôi nghĩ rằng sự khác biệt là chèn thẻ html vào text()thẻ html của bạn không hoạt động

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

đầu ra:

You are registered <br> Mister name sourname

thay thế text()bằnghtml()

đầu ra

You are registered
Mister name sourname

sau đó thẻ <br>hoạt động tronghtml()

— yêu
nguồn

1

Vui lòng sửa câu trả lời của bạn, đoạn mã đầu tiên nên sử dụng text().

— MKaama

0

Hàm văn bản đặt hoặc truy xuất giá trị dưới dạng văn bản thuần túy, nếu không, hàm HTML sẽ đặt hoặc truy xuất giá trị dưới dạng thẻ HTML để thay đổi hoặc sửa đổi giá trị đó. Nếu bạn muốn chỉ thay đổi nội dung thì hãy sử dụng text (). Nhưng nếu bạn cần thay đổi đánh dấu thì bạn phải sử dụng hmtl ().

Đó là một câu trả lời giả cho tôi sau sáu năm, Đừng bận tâm.

— Minhaz
nguồn

Sự khác biệt giữa jQuery: text () và html () là gì?

Câu hỏi phụ: khi chỉ có văn bản, cái gì nhanh hơn, .text()hay .html()?

Sử dụng ở đâu:

Trường hợp không sử dụng:

Sự khác biệt:

Thí dụ

Câu hỏi phụ: khi chỉ có văn bản, cái gì nhanh hơn, `.text()`hay `.html()`?