SlideShare a Scribd company logo
1 of 1
Download to read offline
Difference between append() and html() in jQuery

      S.No       jQuery.append()                  jQuery.html()

      1          .append() add some value with    .html() do the same as like
                 the existing one.                .append() but it removes the old
                                                  value.


Here is an example given to understand the practical difference between .append() and
.html(),
<ul id="test">
<li>test</li>
</ul>

Now if .append() is used to add one <li>,as given below

<script type="text/javascript>" jQuery("#test").append("<li>test1</li>"); </script>

The output of this jQuery will be <ul id="test"> <li>test</li> <li>test1</li> </ul>

Now if .html() is used to add one <li>,as provided below

<script type="text/javascript>" jQuery("#test").html("<li>test1</li>"); </script>

The output of this Script will be <ul id="test"> <li>test1</li> </ul>

Here in this example .append() add one extra <li>, whether .html() removes the old one
with new one. This is the main difference between .append() and .html() in Jquery

Reference:

http://chaitanyalella.blogspot.in/2012/03/difference-between-append-and-html-in.html

And, further updates on difference between questions and answers, please visit my
blog @ http://onlydifferencefaqs.blogspot.in/

More Related Content

More from Umar Ali

More from Umar Ali (20)

Affiliate Networks Sites-1
Affiliate Networks Sites-1Affiliate Networks Sites-1
Affiliate Networks Sites-1
 
Technical Video Training Sites- 1
Technical Video Training Sites- 1Technical Video Training Sites- 1
Technical Video Training Sites- 1
 
US News Sites- 1
US News Sites- 1 US News Sites- 1
US News Sites- 1
 
How to create user friendly file hosting link sites
How to create user friendly file hosting link sitesHow to create user friendly file hosting link sites
How to create user friendly file hosting link sites
 
Weak hadiths in tamil
Weak hadiths in tamilWeak hadiths in tamil
Weak hadiths in tamil
 
Bulughul Maram in tamil
Bulughul Maram in tamilBulughul Maram in tamil
Bulughul Maram in tamil
 
Asp.net website usage and job trends
Asp.net website usage and job trendsAsp.net website usage and job trends
Asp.net website usage and job trends
 
Indian news sites- 1
Indian news sites- 1 Indian news sites- 1
Indian news sites- 1
 
Photo sharing sites- 1
Photo sharing sites- 1 Photo sharing sites- 1
Photo sharing sites- 1
 
File hosting search engines
File hosting search enginesFile hosting search engines
File hosting search engines
 
Ajax difference faqs compiled- 1
Ajax difference  faqs compiled- 1Ajax difference  faqs compiled- 1
Ajax difference faqs compiled- 1
 
ADO.NET difference faqs compiled- 1
ADO.NET difference  faqs compiled- 1ADO.NET difference  faqs compiled- 1
ADO.NET difference faqs compiled- 1
 
Dotnet differences compiled -1
Dotnet differences compiled -1Dotnet differences compiled -1
Dotnet differences compiled -1
 
.NET Differences List
.NET Differences List.NET Differences List
.NET Differences List
 
Difference between ajax and silverlight
Difference between ajax and silverlightDifference between ajax and silverlight
Difference between ajax and silverlight
 
Difference between is and as operators in c#
Difference between is and as operators in c#Difference between is and as operators in c#
Difference between is and as operators in c#
 
Difference between c# generics and c++ templates
Difference between c# generics and c++ templatesDifference between c# generics and c++ templates
Difference between c# generics and c++ templates
 
Var vs iEnumerable
Var vs iEnumerableVar vs iEnumerable
Var vs iEnumerable
 
Differences between get children() and getdescendants() methods
Differences between get children() and getdescendants() methodsDifferences between get children() and getdescendants() methods
Differences between get children() and getdescendants() methods
 
Ruby on rails vs asp.net mvc
Ruby on rails vs asp.net mvcRuby on rails vs asp.net mvc
Ruby on rails vs asp.net mvc
 

Recently uploaded

Recently uploaded (20)

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 

Jquery.append() vs jquery.html()

  • 1. Difference between append() and html() in jQuery S.No jQuery.append() jQuery.html() 1 .append() add some value with .html() do the same as like the existing one. .append() but it removes the old value. Here is an example given to understand the practical difference between .append() and .html(), <ul id="test"> <li>test</li> </ul> Now if .append() is used to add one <li>,as given below <script type="text/javascript>" jQuery("#test").append("<li>test1</li>"); </script> The output of this jQuery will be <ul id="test"> <li>test</li> <li>test1</li> </ul> Now if .html() is used to add one <li>,as provided below <script type="text/javascript>" jQuery("#test").html("<li>test1</li>"); </script> The output of this Script will be <ul id="test"> <li>test1</li> </ul> Here in this example .append() add one extra <li>, whether .html() removes the old one with new one. This is the main difference between .append() and .html() in Jquery Reference: http://chaitanyalella.blogspot.in/2012/03/difference-between-append-and-html-in.html And, further updates on difference between questions and answers, please visit my blog @ http://onlydifferencefaqs.blogspot.in/