CODEWITHSUNDEEP
javascriptjqueryhtml
htoniv
htoniv

Reputation: 1668

Unexpected behaviour of jQuery html() and append()

So here i am having a div created using normal HTML like this.

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

And by using jquery selector i am inserting html elements dynamically like

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

Here i am expecting the output like this.

Hello World

This is awesome

This is awesome

But the original output is 

Hello World

This is awesome

I cant understand why it is coming like this. Correct me if i asked anything wrong. Thanks in advance

Upvotes: 5

Views: 146

Answers (5)

Rahul Malu
Rahul Malu

Reputation: 566

$("").html() function replaces the HTML with the new HTML specified as parameter. $("").append() appends the HTML string given as parameter to the container.

Upvotes: 0

Tushar
Tushar

Reputation: 87203

html(String) will replace the innerHTML of the element by passed string.

append(String) will append passed string to the end of element.

So, when you call html() on element, previous elements are overwritten. Your code is equivalent to

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

I'll recommend to create HMTL first and then update it in DOM. This will be little faster as it has to interact with DOM only once.

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

Upvotes: 3

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

This is because, html() will override the old html content and put new content and append() will append the content. 

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

Upvotes: 1

Happy Coding
Happy Coding

Reputation: 2525

It work something like this :

html() will replace the innerHTML of the element.

append() will append new HTML to the end of existing elements.

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

Upvotes: 1

KevBot
KevBot

Reputation: 18888

.html(); does 1 of two things. It either retrieves the HTML in the element, or is sets it if there is an argument. When it sets it, it completely overwrites whatever was there.

Take this slightly changed example where you can see easier the effects of using .html(). Notice that Hello World 1, and This is awesome 1 is not found in the div.

Example:

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>

Upvotes: 1

Related Questions