В чем разница между .empty (). Append () и .html ()?

Question

Используя jQuery, какая разница в производительности между:

$('#somDiv').empty().append('text To Insert')

и

$('#somDiv').html('text To Insert')

Answer 1

$('#somDiv').html(value) эквивалентно $('#somDiv').empty().append(value).

Источник: jQuery источник .

Answer 2

.html перезапишет содержимое DIV.

.append добавит содержимое DIV.

Answer 3

разница между append() и html() в jQuery

.append() и .html() - самые полезные методы в jQuery. Но они сильно отличаются друг от друга, .append() добавляет некоторую ценность существующему. Где .html() делает то же самое, но сначала удаляет старое значение.

Вот пример:

<ul id="test">
<li>test</li>
</ul>

Теперь я буду использовать .append(), чтобы добавить один <li>, для этого я напишу:

<script type="text/javascript>"
jQuery("#test").append("<li>test1</li>");
</script>

Вывод этого jQuery будет:

<ul id="test">
<li>test</li>
<li>test1</li>
</ul>

Теперь, если я использую .html(), чтобы добавить один <li>, для этого я напишу:

<script type="text/javascript>"
jQuery("#test").html("<li>test1</li>");
</script>

Вывод этого скрипта будет:

<ul id="test">
<li>test1</li>
</ul>

Вот в этом примере .append() добавить еще один <li>, удаляет ли .html() старый с новым. В этом главное отличие между .append() и .html() в jQuery.

Answer 4

Понять значение и функции расширений, предоставляемых в jQuery.

$('#somDiv').empty().append('text To Insert')

- Приведенный выше код сначала очистит содержимое тега div id, а затем добавит текст в целевой div:

$('#somDiv').html('text To Insert')

- Выше кода замените текст тега div текстом html:

Answer 5

Правильный синтаксис:

$("#somDiv").html("<span>Hello world</span>");

Answer 6

Простыми словами:

$('#somDiv').append('blabla')

работает так:

<div id='somDiv'>some text</div>

становится:

<div id='somDiv'>some textblabla</div>

И innerHTML заменяет содержимое, поэтому оно становится таким:

<div id='somDiv'>blabla</div>