Difference between append and html in jQuery

Question

What does the difference of html() and append() when it comes to jQuery because if I use append() it will display my data in the next line while if I use html() it will just overwrite the first data being displayed...

Now what I want is the function of html() but displaying it in the next line instead of overwriting the previous data displayed and if the previous data is already being displayed it will just highlight it instead of appending it in the next line here is my javascript code

html2 += '<div class="rightcontainer">';
html2 += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>';
html2 += '<div id="imagedetail">';
html2 += '<span class="details">Product Type:' + flsSites[index].serial_number +'</span>';
html2 += '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>';
html2 += '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>';
html2 += '<span class="details">Site name / manufacturer</span>';
html2 += '<span class="details">Selling Sales Eng</span>';
html2 += '</div>'
html2 += '</div>';
$('#resultcontainer').append(html2);
$('.rightcontainer').eq($(this).index()).addClass('background');

Thanks

$('#').html() will completely replace the content inside the tag that the selector corresponds to. $('#').append() will just append to the end of the content inside the tag. — Upendra Joshi, Oct 11 '17 at 07:35
This is known question in stackoverflow https://stackoverflow.com/questions/3015335/jquery-html-vs-append — , Oct 11 '17 at 07:35
add and show your code. But yes you can do it with .innerHTML . you just need to concat the value and not just insert it — sheplu, Oct 11 '17 at 07:36
@SidBhalke hi I have added my codes just to support my explanation — Kyle, Oct 11 '17 at 07:48

score 2 · Answer 1 · edited Oct 11 '17 at 07:56

2

$(el).html() replace everything that is inside the selector.

 <div class="el">
      <!-- Everything here gets replaced -->
 </div>

$(el).append() puts inside selector at the end.

 <div class="el">
      [...]
      <!-- appends it here -->
 </div>

$(el).prepend() puts inside selector at the begining.

 <div class="el">
      <!-- preprend it here -->
      [...]
 </div>

$(el).before() puts outside before the selector.

 <!-- appends it here -->
 <div class="el">
      [...]
 </div>

$(el).after() puts outside after selector.

 <div class="el">
      [...]
 </div>
 <!-- appends it here -->

edited Oct 11 '17 at 07:56

GGO

2,678
4
20
42

answered Oct 11 '17 at 07:38

oninross

989
6
23

1

`append()` is adding innerHTML/children element at the last, not after an element. that would be the work of `after()` function. – Taufik Nur Rahmanda Oct 11 '17 at 07:54
1

Yes i corrected oninross's answer, please don't down vote now – GGO Oct 11 '17 at 08:02

Difference between append and html in jQuery

1 Answers1

Related