Неожиданное поведение jQuery html() и append()

Question

Итак, у меня есть div, созданный с использованием обычного HTML.

<div id="prop"></div> 

И с помощью селектора JQuery я вставив HTML элементы динамически, как

var Container = $('#prop'); 
Container.html('<p>Hello World</p>'); 
Container.append('<p>This is awesome</p>'); 
Container.html('<p>Hello World</p>'); 
Container.append('<p>This is awesome</p>'); 

Здесь я ожидал выход, как это.

Hello World 

This is awesome 

This is awesome 

Но оригинальный выход

Hello World 

This is awesome 

Я не могу понять, почему он приходит, как это. Поправьте меня, если я спрошу что-нибудь не так. Заранее спасибо

Answer 1

html(String) будет заменить внутреннийHTML элемента переданной строкой.

append(String)append Прошел строку до конца элемента.

Итак, когда вы вызываете html() на элемент, предыдущие элементы перезаписываются. Ваш код эквивалентен

var Container = $('#prop'); 

// Do something here with innerHTML 
// and next line will overwrite it 
Container.html('<p>Hello World</p>'); 
Container.append('<p>This is awesome</p>'); 

---

Я рекомендую сначала создать HMTL, а затем обновить его в DOM. Это будет немного быстрее, поскольку он должен взаимодействовать с DOM только один раз.

var elem = '<p>Hello World!</p><p>This is Awesome</p>'; 
$('#prop').html(elem); 

Answer 2

.html(); делает 1 из двух вещей. Он либо извлекает HTML в элементе, либо задает его, если есть аргумент. Когда он устанавливает его, он полностью перезаписывает все, что там было.

Возьмите этот слегка измененный пример, где вы можете увидеть эффекты использования .html(). Обратите внимание, что Hello World 1 и This is awesome 1 не найдены в div.

Пример:

var Container = $('#prop'); 
 
Container.html('<p>Hello World 1</p>'); 
 
Container.append('<p>This is awesome 1</p>'); 
 
Container.html('<p>Hello World 2</p>'); 
 
Container.append('<p>This is awesome 2</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="prop"></div>

Answer 3

Он работает что-то вроде этого:

HTML() заменит innerHTML элемента.

append() добавит новый HTML к концу существующих элементов.

<script type="text/javascript"> 

var Container = $('#prop'); 

/* Step 1 : Setting the Hello World in a div containing id #prop */ 
Container.html('<p>Hello World</p>'); 
/* Step 2 : Appending the This is awesome in the same div */ 
Container.append('<p>This is awesome</p>'); 
/* Step 3 : Setting the Hello World in a div containing id #prop (overiding the previous value) */ 
Container.html('<p>Hello World</p>'); 
/* Step 4 : Appending the This is awesome in the same div */ 
Container.append('<p>This is awesome</p>'); 

</script> 

Answer 4

Это потому, что HTML() отменяет старое содержимое HTML и поместить новое содержание и добавить() будет добавлять содержимое.

Container.html('<p>Hello World</p>'); 
Container.append('<p>This is awesome</p>'); 

Container.html('<p>Hello World</p>'); 
// this line override previous html 


Container.append('<p>This is awesome</p>'); 

Answer 5

$ (""). Функция html() заменяет HTML новым HTML, указанным в качестве параметра. $ ("").append() добавляет строку HTML, указанную как параметр в контейнер.