Два способа построения HTML - .html() и .append()

Question

В JQuery, я знаю, что мы можем заменить HTML объекта с помощью .html(html code here), и мы также можем использовать один из методов (append, appendTo, prepend, и т.д. .) для достижения той же цели .html(...).

Но в чем разница между этими двумя способами?

Обновлено

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

$('<a>close</a>').click(function() { 
      alert("test"); 
     }).appendTo($('.widget-head')); 

var sHtml = $('.widget-head').wrap('<p>').parent().html(); 
$(currentTmpContainer).html(resultHtml); 

(Это только фрагмент кода. Я думаю, что вы бы хорошо понимаю это. Спасибо.)
Наконец, я обнаружил, что .click не работает в моем примере. Я думаю, причина в том, что я использую .html() вместо .append(). Правильно ли это? Благодарю.

Answer 1

1. С .html переопределить содержание, в то время как с .append добавить содержимое в конец тега.
2. html принимает только сырую строку, с append вы также можете использовать объект jQuery.

Пример:

$('#foo').html($('<input>')); //invalid! 
$('#foo').append($('<input>')); //Valid! 

С событиями:

var $input = $('<input>').click(function(){ 
    alert('foo'); 
}); 

$('#foo').append($input); 

Answer 2

Я предпочитаю использовать .html() для изменения текста элемента. Например.

$('.myElement').html('Hello, World!'); 

Какие результаты в чем-то вроде

<p class='myElement'>Hello, World!</p> 

Я использую .append(), чтобы добавить новый элемент в существующий. Например.

$('.myElement').append($('<span>Inner Element!</span>')); 

Какие результаты в

<p class='myElement'><span>Inner Element!</span></p> 

Причина я использую .append() является то, что она позволяет мне использовать JQuery, чтобы построить на новом элементе. Например.

var newElement = $('<span>Inner Element!</span>').click(function(e){ alert("Hello!"); }); 
$('.myElement').append(newElement);