276

Apa perbedaan antara fungsi text () dan html () di jQuery?

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

vs.

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

jquery dom

— Brettk
sumber

2

Sebuah pertanyaan yang tidak jelas: ketika kita hanya membutuhkan teks (tanpa tag html), text()metode ini lebih cepat ?? Berapa banyak?

— Peter Krauss

347

Saya pikir perbedaannya hampir jelas. Dan sangat sepele untuk diuji.

jQuery.html()memperlakukan string sebagai HTML, jQuery.text()memperlakukan konten sebagai teks

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

Perbedaan yang mungkin tidak begitu jelas dijelaskan dalam dokumentasi API jQuery

Dalam dokumentasi untuk .html () :

The .html()Metode ini tidak tersedia dalam dokumen XML.

Dan dalam dokumentasi untuk .text () :

Berbeda dengan .html()metode, .text()dapat digunakan dalam dokumen XML dan 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>

Luaskan cuplikan

Demo langsung di http://jsfiddle.net/hossain/sUTVg/

— Peter Bailey
sumber

Perlu dicatat juga, bahwa panjangnya berbeda antara keduanya juga. jsfiddle.net/sUTVg/458

— GreeKatrina

5

@aequalsb Saya menyadari bahwa ini adalah pertanyaan lama sekarang, tetapi saya harus berkomentar bahwa default untuk menggunakan ´.html () ´ berbahaya karena teks diperlakukan sebagai HTML. Jika Anda mendapatkan teks itu dari parameter querystring, form, header, URL atau tempat lain yang orang lain selain Anda dapat menyediakan atau mengedit teks, maka Anda terbuka lebar untuk XSS.

— Canis

105

((perbarui jika perlu, jawaban ini adalah Wiki))

Sub-pertanyaan: kapan hanya teks, apa yang lebih cepat, `.text()`atau `.html()`?

Jawab: .html() lebih cepat! Lihat di sini "kit uji perilaku" untuk semua pertanyaan .

Jadi, sebagai kesimpulan, jika Anda memiliki "hanya teks", gunakan html()metode.

Catatan: Tidak masuk akal? Ingat bahwa .html()fungsi ini hanya sebagai pembungkus .innerHTML, tetapi dalam .text()fungsi jQuery menambahkan "filter entitas" , dan filter ini secara alami menghabiskan waktu.

Oke, jika Anda benar-benar menginginkan kinerja ... Gunakan Javascript murni untuk mengakses penggantian teks langsung oleh nodeValueproperti. Kesimpulan Benchmark:

jQuery's .html()~ 2x lebih cepat dari .text().
JS murni ' .innerHTMLadalah ~ 3x lebih cepat dari .html().
JS murni ' .nodeValueadalah ~ 50x lebih cepat dari .html(), ~ 100x daripada .text(), dan ~ 20x daripada .innerHTML.

PS: .textContentproperti diperkenalkan dengan DOM-Level-3,.nodeValue adalah DOM-Level-2 dan lebih cepat (!).

Lihat patokan lengkap ini :

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

7

Tetapi jika berurusan dengan input yang tidak dipercaya, Anda harus menggunakan teks () bila memungkinkan.

— Scott Simontis

@ScottSimontis ketika Anda menyetel nodeValueproperti, properti mengubah ">" menjadi "& lt;", dll.

— Peter Krauss

Ketika saya "membandingkan" dengan Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), hasilnya berlawanan ( .text()tampaknya ~ 7x lebih cepat dari .html()). Kode sumber: codepen.io/damhonglinh/pen/vGpQEO . Saya diuji dengan 1500 elemen; .html()mengambil ~ 220ms dan .text()mengambil ~ 30ms.

— Bendungan Linh

Hai @ LinhDam. Hum ... menggunakan patokan lengkap , Firefox saya mengatakan "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... Dan Chrome saya berkata "JQ TIMES (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... jadi keduanya (Firefox dan Chrome) memiliki rasio waktu yang sama .

— Peter Krauss

menjadi patokan nyata antara teks () dan html () pemilih harus dilakukan atau getElementById atau $ ("# work") dalam semua kasus atau Anda akan melakukan pembandingan juga dengan $ ("# work") vs getElementById

— Octavioamu

66

Contoh pertama sebenarnya akan menanamkan HTML di dalam divsedangkan contoh kedua akan melarikan diri teks dengan cara mengganti karakter terkait elemen dengan entitas karakter yang sesuai sehingga ditampilkan secara harfiah (yaitu HTML akan ditampilkan tidak ditampilkan).

— Andrew Hare
sumber

1

Maaf, saya tidak begitu mengerti. Bisakah Anda menjelaskan lebih lanjut. Terima kasih

— Brettk

Apa maksud Anda contoh ke-2 akan "disandikan"? Sudah mengkodekan, bukan?

— Brettk

@ Brettk - Aku berkata "menyandikan" tapi itu lebih merupakan kesalahan. Saya mengubah jawaban saya untuk lebih mencerminkan apa yang saya maksud.

— Andrew Hare

6

Maksudnya, dalam .text()fungsinya, semua <akan diganti <. Jadi dengan .html()browser akan melihat tautan dan beberapa teks tebal, dengan .text()browser akan melihat semuanya sebagai teks dan bukan membuat tautan atau teks tebal.

— Mottie

59

The text()Metode entitas-lolos HTML yang dilewatkan ke dalamnya. Menggunakantext() ketika Anda ingin memasukkan kode HTML yang akan terlihat oleh orang-orang yang melihat halaman.

Secara teknis, contoh kedua Anda menghasilkan:

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

yang akan dirender di browser sebagai:

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

Contoh pertama Anda akan ditampilkan sebagai tautan aktual dan beberapa teks tebal.

— davidcl
sumber

4

Ini seharusnya dimasukkan dalam jawaban yang dipilih untuk menjelaskan apa yang sebenarnya terjadi.

— d512

27

Sebenarnya keduanya memang terlihat agak mirip tetapi sangat berbeda tergantung pada penggunaan atau niat Anda apa yang ingin Anda capai,

Tempat menggunakan:

menggunakan .html() untuk beroperasi pada wadah yang memiliki elemen html.
gunakan .text()untuk memodifikasi teks elemen biasanya memiliki tag terbuka dan penutup yang terpisah

Di mana tidak digunakan:

.text() metode tidak dapat digunakan pada input formulir atau skrip.
- .val() untuk elemen input atau teks.
- .html() untuk nilai elemen skrip.
Mengambil konten html dari .text()akan mengkonversi tag html menjadi entitas html.

Perbedaan:

.text() dapat digunakan dalam dokumen XML dan HTML.
.html() hanya untuk dokumen html.

Lihat contoh ini di jsfiddle untuk melihat perbedaan dalam tindakan

Contoh

— Owais Qureshi
sumber

1

Jawaban ini adalah yang paling mudah dipahami dan diformat paling baik +1

— Katie

Apa beda bw :: html (data); & val (data); @Owais Qureshi

— Permata

9

Aneh bahwa tidak ada yang menyebutkan manfaat pencegahan scripting Lintas Situs .text()lebih dari .html()(Meskipun yang lain baru saja menyebutkan itu.text() lolos data).

Itu selalu disarankan untuk digunakan .text()ketika Anda ingin memperbarui data dalam DOM yang hanya data / teks untuk dilihat pengguna.

.html() sebagian besar harus digunakan untuk mendapatkan konten HTML dalam div.

— Deb
sumber

5

Gunakan .text (...) saat Anda bermaksud menampilkan nilai sebagai teks sederhana.

Gunakan .html (...) saat Anda bermaksud menampilkan nilai sebagai teks berformat html (atau konten HTML).

Anda harus menggunakan .text (...) saat Anda tidak yakin bahwa teks Anda (mis. Berasal dari kontrol input) tidak mengandung karakter / tag yang memiliki arti khusus dalam HTML. Ini sangat penting karena hal ini dapat mengakibatkan teks tidak akan ditampilkan dengan benar tetapi juga dapat menyebabkan snipet skrip JS yang tidak diinginkan (mis. Berasal dari input pengguna lain) diaktifkan .

— Adorjan Princz
sumber

2

Pada dasarnya, $ ("# div"). Html menggunakan element.innerHTML untuk mengatur konten, dan $ ("# div"). Teks (mungkin) menggunakan 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).

— Seth
sumber

2

$ ('. div'). html (val) akan mengatur nilai HTML semua elemen yang dipilih, $ ('. div'). teks (val) akan mengatur nilai teks dari semua elemen yang dipilih.

API API untuk jQuery.text ()

API API untuk jQuery.html ()

Saya kira mereka masing-masing sesuai dengan Node # textContent dan Element # innerHTML . (Referensi Gecko DOM).

— Michiel Kalkman
sumber

2

Nah secara sederhana.

html () - untuk mendapatkan html dalam (tag dan teks html).

text () - untuk mendapatkan hanya teks jika ada di dalam (hanya teks)

— Mustkeem K
sumber

1

Perbedaannya adalah .html()mengevaluasi sebagai html, .text()menilai sebagai teks.
Pertimbangkan satu blok 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'

Ilustrasi ini dari tautan ini http://api.jquery.com/text/

— Pascal Tovohery
sumber

1

.text()akan memberi Anda teks aktual di antara tag HTML. Misalnya, teks paragraf di antara ptag. Yang menarik untuk dicatat adalah bahwa itu akan memberi Anda semua teks dalam elemen yang Anda targetkan dengan $pemilih Anda plus semua teks dalam elemen anak-anak dari elemen yang dipilih. Jadi, jika Anda memiliki banyak ptag dengan teks di dalam elemen tubuh dan Anda melakukan $(body).text(), Anda akan mendapatkan semua teks dari semua paragraf. (Hanya teks, bukan ptag itu sendiri.)

.html()akan memberi Anda teks dan tag. Jadi $(body).html()pada dasarnya akan memberi Anda seluruh halaman halaman HTML Anda

.val()berfungsi untuk elemen yang memiliki valueatribut, seperti input. Sebuah inputtidak mengandung teks atau HTML dan dengan demikian .text()dan .html()keduanya akan nulluntuk inputelemen.

— Fabian Madurai
sumber

0

Saya pikir perbedaannya adalah menyisipkan tag html di text()tag html Anda tidak berfungsi

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

keluaran:

You are registered <br> Mister name sourname

ganti text()denganhtml()

keluaran

You are registered
Mister name sourname

kemudian tag <br>bekerjahtml()

— David
sumber

1

Harap perbaiki jawaban Anda, cuplikan pertama harus digunakan text().

— MKaama

0

fungsi teks mengatur atau mengambil nilai sebagai teks biasa, jika tidak, fungsi HTML mengatur atau mengambil nilai sebagai tag HTML untuk mengubah atau memodifikasinya. Jika Anda hanya ingin mengubah konten, gunakan teks (). Tetapi jika Anda perlu mengubah markup maka Anda harus menggunakan hmtl ().

Ini jawaban bodoh bagi saya setelah enam tahun, Jangan pedulikan.

— Minhaz
sumber

Apa perbedaan antara jQuery: text () dan html ()?

Sub-pertanyaan: kapan hanya teks, apa yang lebih cepat, .text()atau .html()?

Tempat menggunakan:

Di mana tidak digunakan:

Perbedaan:

Contoh

Sub-pertanyaan: kapan hanya teks, apa yang lebih cepat, `.text()`atau `.html()`?