276

Яка різниця між функціями text () та html () у jQuery?

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

проти

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

jquery dom

— Бретк
джерело

2

Питання, яке не є зрозумілим: коли нам потрібен лише текст (без тегів HTML), text()метод швидший ?? Скільки?

— Пітер Краус

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. Якщо ви отримуєте цей текст із параметра запиту рядка, форми, заголовка, URL-адреси чи будь-якого іншого місця, яке хтось інший, ніж ви можете надати чи відредагувати текст, вам відкрито для XSS.

— Каніс

105

((оновіть, якщо потрібно, ця відповідь - Wiki))

Під питання: коли тільки текст, що швидше, `.text()`або `.html()`?

Відповідь: .html() швидше! Дивіться тут "тест-набір для поведінки" на всі питання .

Отже, на закінчення, якщо у вас є "лише текст", використовуйте html()метод.

Примітка: Не має сенсу? Пам'ятайте, що .html()функція є лише обгорткою .innerHTML, але у .text()функцію jQuery додає "фільтр сутності" , і цей фільтр, природно, витрачає час.

Гаразд, якщо ви дійсно хочете продуктивність ... Використовуйте чистий Javascript для доступу до прямої заміни тексту nodeValueвластивістю. Висновки еталону:

jQuery на .html()~ 2 рази швидше, ніж.text() .
чистий JS ' .innerHTMLна ~ 3 рази швидше, ніж.html() .
чистий JS ' .nodeValueна ~ 50x швидше .html(), ~ 100x ніж .text()і ~ 20x ніж .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());

— Пітер Краус
джерело

7

Але якщо ви маєте справу з ненадійним введенням, вам слід використовувати текст (), коли це можливо.

— Скотт Сімонтіс

@ScottSimontis, коли ви встановлюєте nodeValueвластивість, він перетворює ">" в "& lt;" тощо.

— Пітер Краус

Коли я "орієнтуюся" на Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), результат протилежний ( .text()здається, на 7 разів швидше, ніж .html()). Вихідний код: codepen.io/damhonglinh/pen/vGpQEO . Я протестував з 1500 елементами; .html()взяв ~ 220 .text()мс і взяв ~ 30мс.

— Дамба Лін

Привіт @LinhDam. Хам ... використовуючи повний орієнтир , мій Firefox скаже "JQ TIMES (3000x): html = 82 текст = 254", "JS TIMES (3000x): html = 15 text = 4" ... І мій Chrome скаже "JQ ЧАСИ (3000x): html = 82 текст = 202 "," JS TIMES (3000x): html = 16 текст = 0 ".... тому обидва (Firefox та Chrome) мають однакові співвідношення часу .

— Пітер Краус

щоб бути справжнім орієнтиром між текстом () та html (), селектор повинен бути виконаний або getElementById або $ ("# робота") у всіх випадках, або ви будете також орієнтуватись також на $ ("# роботу") проти getElementById

— Octavioamu

66

Перший приклад фактично буде вбудовувати HTML в divтой час, коли другий приклад вийде з тексту за допомогою заміни символів, пов'язаних з елементами, на відповідні їм символьні об'єкти, щоб він відображався буквально (тобто HTML буде відображатися не виведеним).

— Андрій Заєць
джерело

1

Вибачте, я не зовсім розумію. Не могли б ви далі пояснити. Спасибі

— Бреттк

Що ви маєте на увазі, що другий приклад "кодує"? Це вже кодування, ні?

— Бреттк

@Brettk - я сказав "кодувати", але це було більше ковзання пальців. Я змінив свою відповідь, щоб краще відобразити, що я маю на увазі.

— Ендрю Заєць

6

Він означає, що у .text()функції всі <заміняться на <. Тож із .html()браузером з’явиться посилання та якийсь жирний текст, з .text()браузером буде бачити все як текст, а не робити посилання чи жирний текст.

— Мотті

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() для введення або текстових елементів.
- .html() для значення елемента сценарію.
Вибір html-вмісту з .text()них перетворить теги html в html-об'єкти.

Різниця:

.text() може використовуватися як у XML, так і в HTML документах.
.html() призначено лише для html-документів.

Перевірте цей приклад на jsfiddle, щоб побачити відмінності в дії

Приклад

— Овайс Куреші
джерело

1

Ця відповідь була найпростішою для розуміння та найкращим чином відформатована +1

— Кеті

Що таке diff bw :: html (дані); & val (дані); @Owais Qureshi

— Gem

9

Дивно , що ніхто не згадав запобігання сценаріїв вигоди Cross Сайту .text()над .html()(Хоча іншими тільки що говорив , що.text() вислизає дані).

Його завжди рекомендується використовувати, .text()коли ви хочете оновити дані в DOM, які є лише даними / текстом, які може бачити користувач.

.html() слід в основному використовувати для отримання вмісту HTML у розділі.

— Деб
джерело

5

Використовуйте .text (…), коли ви маєте намір відобразити значення у вигляді простого тексту.

Використовуйте .html (…), коли ви маєте намір відображати значення у форматі html-тексту (або вмісту HTML).

Ви обов'язково повинні використовувати .text (...), коли ви не впевнені, що ваш текст (наприклад, що надходить з керування введенням) не містить символів / тегів, які мають особливе значення в HTML. Це дуже важливо, оскільки це може призвести до того, що текст не відображатиметься належним чином, але це також може спричинити активацію небажаного фрагмента сценарію JS (наприклад, що надходить з іншого вводу користувача) .

— Адорян Принч
джерело

2

В основному, $ ("# 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).

— Сет
джерело

2

$ ('. div'). html (val) встановить значення HTML для всіх вибраних елементів, $ ('. div'). text (val) встановить текстові значення всіх вибраних елементів.

Документи API для jQuery.text ()

Документи API для jQuery.html ()

Я б здогадався, що вони відповідають Node # textContent та Element # innerHTML відповідно. (Посилання Gecko DOM).

— Міхель Калкман
джерело

2

Ну просто кажучи.

html () - щоб отримати внутрішній html (html-теги та текст).

text () - щоб отримати лише текст, якщо він присутній всередині (лише текст)

— Mustkeem K
джерело

1

Різні є .html()оцінити як HTML, .text()avaluate в текстовому вигляді .
Розглянемо блок
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/

— Паскаль Товохері
джерело

1

.text()дасть вам фактичний текст між тегами HTML. Наприклад, текст абзацу між pтегами. Що цікаво відзначити, це те, що він надасть вам увесь текст у елементі, на який ви орієнтовані разом із вашим $селектором, а також увесь текст у дочірніх елементах цього вибраного елемента. Отже, якщо у вас є кілька pтегів з текстом всередині елемента тіла, і ви робите a $(body).text(), ви отримаєте весь текст з усіх абзаців. (Лише текст, а не pсамі теги.)

.html()дасть вам текст та теги. Таким чином $(body).html(), ви отримаєте всю вашу сторінку HTML-сторінки

.val()працює для елементів, які мають valueатрибут, наприклад input. An inputне містить тексту чи HTML, і таким чином, .text()і .html()обидва будуть nullдля inputелементів.

— Фабіан Мадурай
джерело

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

— Девід
джерело

1

Виправте свою відповідь. Перший фрагмент повинен використовуватись text().

— MKaama

0

текстові функції встановлюють або отримують значення у вигляді простого тексту, інакше функція HTML встановлює або отримує значення у вигляді тегів HTML, щоб змінити або змінити це. Якщо ви хочете просто змінити вміст, використовуйте текст (). Але якщо вам потрібно змінити розмітку, вам доведеться використовувати hmtl ().

Це неприємна відповідь для мене через шість років, не заперечуй.

— Мінхаз
джерело

Яка різниця між jQuery: text () та html ()?

Під питання: коли тільки текст, що швидше, .text()або .html()?

Де використовувати:

Де не користуватися:

Різниця:

Приклад

Під питання: коли тільки текст, що швидше, `.text()`або `.html()`?