jQuery html（）和append（）的异常行为

Question

所以在这里，我使用这样的普通HTML创建了一个div。

<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)将用传递的字符串替换元素的innerHTML。

append(String)将把传递的字符串附加到元素的末尾。

因此，当您调用html()element 时，先前的元素将被覆盖。你的代码相当于

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