javascript - 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() 时，先前的元素将被覆盖。你的代码等同于

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

---

我建议先创建 HTML，然后在 DOM 中更新它。这会快一点，因为它只需要与 DOM 交互一次。

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