276

อะไรคือความแตกต่างระหว่าง text () และ html () ใน 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
แหล่งที่มา

2

คำถามที่ไม่อธิบายตนเอง: เมื่อเราต้องการเพียงข้อความ (ไม่มีแท็ก html) text()วิธีการนั้นเร็วกว่า เท่าไหร่

— Peter Krauss

347

ฉันคิดว่าความแตกต่างใกล้จะอธิบายได้เอง และมันก็เป็นสิ่งสำคัญที่จะทดสอบ

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/

— ปีเตอร์เบลีย์
แหล่งที่มา

มันควรจะสังเกตด้วยว่าความยาวนั้นต่างกันเช่นกัน jsfiddle.net/sUTVg/458

— GreeKatrina

5

@aequalsb ฉันรู้ว่านี่เป็นคำถามเก่าตอนนี้ แต่ฉันต้องสังเกตว่าการเริ่มต้นใช้´.html () ´นั้นเป็นอันตรายเพราะข้อความที่ถือว่าเป็น HTML หากคุณได้รับข้อความนั้นจากพารามิเตอร์ querystring, รูปแบบ, ส่วนหัว, URL หรือสถานที่อื่น ๆ ที่บุคคลอื่นที่คุณสามารถจัดหาหรือแก้ไขข้อความได้แสดงว่าคุณเปิดกว้างสำหรับ XSS

— Canis

105

((โปรดอัปเดตหากจำเป็นคำตอบนี้เป็น Wiki))

คำถามย่อย: เมื่อข้อความเท่านั้นสิ่งที่เร็วขึ้น`.text()`หรือ`.html()`?

คำตอบ: .html()เร็วกว่า! ดูที่นี่ "ชุดทดสอบพฤติกรรม" สำหรับคำถามทั้งหมด

ดังนั้นโดยสรุปหากคุณมี "ข้อความเท่านั้น" ใช้html()วิธีการ

หมายเหตุ:ไม่เข้าท่าใช่ไหม โปรดจำไว้ว่า.html()ฟังก์ชั่นเป็นเพียง wrapper to .innerHTMLแต่ใน.text()ฟังก์ชั่น jQuery เพิ่ม"filter filter"และตัวกรองนี้ใช้เวลาโดยธรรมชาติ

ตกลงถ้าคุณต้องการประสิทธิภาพจริงๆ ... ใช้ Javascript แท้ๆเพื่อเข้าถึงnodeValueคุณสมบัติแทนที่ข้อความโดยตรง ข้อสรุปมาตรฐาน:

ของ jQuery .html()คือ ~ 2x .text()เร็วกว่า
JS บริสุทธิ์' .innerHTMLเป็น ~ 3x .html()เร็วกว่า
บริสุทธิ์ JS' .nodeValueเป็น ~ 50x เร็วกว่า.html()~ 100x กว่า.text()และ ~ 20x .innerHTMLกว่า

PS: .textContentคุณสมบัติถูกนำมาใช้กับ DOM-Level-3 .nodeValueคือ DOM-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());

— Peter Krauss
แหล่งที่มา

7

แต่ถ้าจัดการกับอินพุตที่ไม่น่าเชื่อถือคุณควรใช้ text () ทุกครั้งที่ทำได้

— Scott Simontis

@ScottSimontis เมื่อคุณตั้งค่าnodeValueคุณสมบัติมันจะแปลง ">" เป็น "& lt;" ฯลฯ

— Peter Krauss

เมื่อฉัน "เปรียบเทียบ" กับ Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ) ผลลัพธ์จะตรงกันข้าม ( .text()ดูเหมือนว่าจะเร็วกว่า ~ 7x .html()) รหัสที่มา: codepen.io/damhonglinh/pen/vGpQEO ฉันทดสอบด้วยองค์ประกอบ 1500 ชิ้น .html()ใช้เวลา ~ 220ms และ.text()ใช้เวลา ~ 30ms

— เขื่อน Linh

สวัสดี @LinhDam ฮัม ... ใช้มาตรฐานที่สมบูรณ์ Firefox ของฉันพูดว่า "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... และ Chrome ของฉันพูดว่า "JQ ไทม์ส (3000X): html = 82 ข้อความ = 202" , "เจเอสไทม์ส (3000X): html = 16 ข้อความ = 0" .... ดังนั้นทั้งสอง (Firefox และ Chrome) มีเดียวกันอัตราส่วนเวลา

— Peter Krauss

เพื่อเป็นเกณฑ์มาตรฐานจริงระหว่าง text () และ html () ตัวเลือกควรทำหรือ getElementById หรือ $ ("# work") ในทุกกรณีหรือคุณจะทำการเปรียบเทียบด้วย $ ("# work") vs getElementById

— Octavioamu

66

ตัวอย่างแรกจริงจะฝัง HTML ในdivขณะที่ตัวอย่างที่สองจะหลบหนีข้อความโดยใช้วิธีการแทนที่ตัวอักษรองค์ประกอบที่เกี่ยวข้องกับการที่สอดคล้องกันของพวกเขาหน่วยงานที่ตัวอักษรเพื่อให้แสดงตัวอักษร (เช่น HTML จะแสดงไม่ได้แสดง)

— Andrew Hare
แหล่งที่มา

1

ขออภัยฉันไม่เข้าใจ คุณช่วยอธิบายเพิ่มเติมได้ไหม ขอบคุณ

— Brettk

คุณหมายถึงตัวอย่างที่ 2 ที่จะ "เข้ารหัส"? มันเข้ารหัสแล้วใช่ไหม

— Brettk

@ เบร็ท - ฉันพูดว่า "เข้ารหัส" แต่นั่นเป็นนิ้วมือที่ลื่นกว่า ฉันเปลี่ยนคำตอบเพื่อให้สะท้อนถึงสิ่งที่ฉันหมายถึง

— Andrew Hare

6

เขาหมายถึงว่าใน.text()ฟังก์ชั่นทั้งหมดจะถูกแทนที่ด้วย< <ดังนั้นด้วย.html()เบราว์เซอร์จะเห็นลิงก์และข้อความตัวหนาบางส่วน.text()เบราว์เซอร์จะเห็นทุกอย่างเป็นข้อความและไม่สร้างลิงก์หรือข้อความตัวหนา

— Mottie

59

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>

ตัวอย่างแรกของคุณจะแสดงผลเป็นลิงก์จริงและเป็นข้อความตัวหนา

— davidcl
แหล่งที่มา

4

สิ่งนี้ควรรวมอยู่ในคำตอบที่เลือกเพื่ออธิบายสิ่งที่เกิดขึ้นจริง

— d512

27

ที่จริงแล้วทั้งสองมีลักษณะค่อนข้างคล้ายกัน แต่แตกต่างกันมากขึ้นอยู่กับการใช้งานหรือความตั้งใจของคุณในสิ่งที่คุณต้องการบรรลุ

ใช้ที่ไหน:

ใช้.html()เพื่อดำเนินการบนภาชนะที่มีองค์ประกอบ HTML
ใช้.text()เพื่อแก้ไขข้อความองค์ประกอบมักจะมีแท็กเปิดและปิดแยกต่างหาก

ไม่ควรใช้:

.text() เมธอดไม่สามารถใช้กับอินพุตหรือสคริปต์ของฟอร์ม
- .val() สำหรับองค์ประกอบอินพุตหรือ textarea
- .html() สำหรับค่าขององค์ประกอบสคริปต์
การรับเนื้อหา html จาก.text()จะแปลงแท็ก html เป็นเอนทิตี html

ความแตกต่าง:

.text() สามารถใช้ได้ทั้งในเอกสาร XML และ HTML
.html() สำหรับเอกสาร html เท่านั้น

ตรวจสอบตัวอย่างนี้บน jsfiddle เพื่อดูความแตกต่างในการทำงาน

ตัวอย่าง

— Owais Qureshi
แหล่งที่มา

1

คำตอบนี้ง่ายที่สุดในการเข้าใจและจัดรูปแบบดีที่สุด +1

— Katie

diff bw :: html คืออะไร & val (ข้อมูล); @Owais Qureshi

— Gem

9

แปลกที่ไม่มีใครพูดถึงประโยชน์การป้องกันการเขียนสคริปต์ข้ามไซต์.text()มากกว่า.html()(แม้ว่าคนอื่น ๆ เพิ่งพูดถึงว่า.text()หนีข้อมูล)

ขอแนะนำให้ใช้เสมอ.text()เมื่อคุณต้องการอัปเดตข้อมูลใน DOM ซึ่งเป็นเพียงข้อมูล / ข้อความเพื่อให้ผู้ใช้เห็น

.html() ส่วนใหญ่ควรใช้เพื่อรับเนื้อหา HTML ภายใน div

— หญิงที่เข้าสังคมครั้งแรก
แหล่งที่มา

5

ใช้. text (…) เมื่อคุณต้องการแสดงค่าเป็นข้อความแบบง่าย

ใช้. html (…) เมื่อคุณต้องการแสดงค่าเป็นข้อความที่จัดรูปแบบ html (หรือเนื้อหา HTML)

แน่นอนคุณควรใช้. text (... )เมื่อคุณไม่แน่ใจว่าข้อความของคุณ (เช่นมาจากการควบคุมอินพุต) ไม่มีอักขระ / แท็กที่มีความหมายพิเศษใน HTML นี่คือสิ่งที่สำคัญจริงๆเพราะอาจส่งผลในข้อความจะไม่แสดงอย่างถูกต้อง แต่ก็ยังอาจก่อให้เกิดที่JS ที่ไม่พึงประสงค์สคริปต์ตัวอย่างข้อมูล (เช่นมาจากการป้อนข้อมูลของผู้ใช้อื่น) จะเปิดใช้งาน

— Adorjan Princz
แหล่งที่มา

2

โดยพื้นฐานแล้ว $ ("# div"). html ใช้ element.innerHTML เพื่อตั้งเนื้อหาและ $ ("# div") ข้อความ (อาจ) ใช้ 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).

— เซท
แหล่งที่มา

2

$ ('. div'). html (val)จะตั้งค่า HTML ขององค์ประกอบที่เลือกทั้งหมด$ ('. div'). text (val)จะตั้งค่าข้อความขององค์ประกอบที่เลือกทั้งหมด

API เอกสารสำหรับ jQuery.text ()

API เอกสารสำหรับ jQuery.html ()

ฉันเดาว่ามันสอดคล้องกับNode # textContentและElement # innerHTMLตามลำดับ (การอ้างอิง Gecko DOM)

— Michiel Kalkman
แหล่งที่มา

2

ในระยะง่าย

html () - เพื่อรับ html ภายใน (แท็ก html และข้อความ)

ข้อความ () - เพื่อรับข้อความเฉพาะถ้ามีอยู่ภายใน (ข้อความเท่านั้น)

— Mustkeem K
แหล่งที่มา

1

ความแตกต่างคือ.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>

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'

ภาพประกอบมาจากลิงค์นี้http://api.jquery.com/text/

— Pascal Tovohery
แหล่งที่มา

1

.text()จะให้ข้อความจริงระหว่างแท็ก HTML ตัวอย่างเช่นข้อความในย่อหน้าระหว่างpแท็ก สิ่งที่น่าสนใจที่ควรทราบคือมันจะให้ข้อความทั้งหมดในองค์ประกอบที่คุณกำหนดเป้าหมายด้วย$ตัวเลือกของคุณรวมถึงข้อความทั้งหมดในองค์ประกอบลูกขององค์ประกอบที่เลือก ดังนั้นหากคุณมีหลายpแท็กที่มีข้อความภายในองค์ประกอบร่างกายและคุณทำ$(body).text()คุณจะได้รับทุกข้อความจากวรรคทั้งหมด (เฉพาะข้อความไม่ใช่pแท็กเอง)

.html()จะให้ข้อความและแท็กแก่คุณ ดังนั้น$(body).html()โดยทั่วไปจะให้ทั้งหน้า HTML ของคุณหน้า

.val()ทำงานสำหรับองค์ประกอบที่มีแอตทริบิวต์เช่นvalue ไม่ได้มีข้อความหรือ HTML และทำให้และทั้งสองจะสำหรับองค์ประกอบinputinput.text().html()nullinput

— เฟเบียนมาดูไร
แหล่งที่มา

0

ฉันคิดว่าความแตกต่างคือการแทรกแท็ก html ในtext()แท็ก 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()

— david
แหล่งที่มา

1

text()โปรดแก้ไขคำตอบของคุณตัวอย่างแรกที่ควรใช้

— MKaama

0

ฟังก์ชั่นข้อความตั้งค่าหรือดึงค่าเป็นข้อความธรรมดามิฉะนั้นฟังก์ชั่น HTML ตั้งค่าหรือดึงค่าเป็นแท็ก HTML เพื่อเปลี่ยนหรือแก้ไขที่ หากคุณต้องการเปลี่ยนเนื้อหาให้ใช้ข้อความ () แต่ถ้าคุณต้องการเปลี่ยนมาร์กอัปคุณต้องใช้ hmtl ()

มันเป็นคำตอบที่หลอกสำหรับฉันหลังจากหกปีไม่เป็นไร

— Minhaz
แหล่งที่มา

ความแตกต่างระหว่าง jQuery: text () และ html () คืออะไร?

คำถามย่อย: เมื่อข้อความเท่านั้นสิ่งที่เร็วขึ้น.text()หรือ.html()?

ใช้ที่ไหน:

ไม่ควรใช้:

ความแตกต่าง:

ตัวอย่าง

คำถามย่อย: เมื่อข้อความเท่านั้นสิ่งที่เร็วขึ้น`.text()`หรือ`.html()`?