实施例

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

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

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

Answer 2

.html();做两件事之一。它要么检索元素中的HTML，要么在有参数时设置它。当它设置它时，它会完全覆盖那里的任何东西。

采用这个略微更改的示例，您可以更轻松地了解使用.html()的效果。请注意，在div中找不到Hello World 1和This is awesome 1。

实施例

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内容并添加新内容，append（）将追加内容。

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

$（＆＃34;＆＃34;）。html（）函数用指定为参数的新HTML替换HTML。 $（＆＃34;＆＃34;）。append（）将作为参数给出的HTML字符串附加到容器中。

jQuery html（）和append（）的意外行为

5 个答案:

实施例