Basic jQuery Tutorial: Write or Append content to DIV

Pin It


In this article, I will be showing you how to write or append content to DIV. When you write, all the text present before will be replaced by new content. When you append, new content will be added after the previous content already present there.


VIEW DEMO

Here is my html code. This contains a div with class ‘content’ and two buttons (Write and Append).

<div class="content">
	Write Something!
</div>
<br />
 
<button>Write</button>
<button>Append</button>

Here is the jQuery code to write data:

$("#write").click(function(){
	$(".content").html("Hello World! ");
});

Here is the jQuery code to append data:

$("#append").click(function(){
	$(".content").append("Hello World! ");
});


VIEW DEMO

Cheers,

3 total pingbacks on this post
  1. WordPress Rocker

Twitter

  • May 2, 2012 04:15

    10 Free WordPress Theme To Make You Forget About Premium Theme http://t.co/YRiLCiVa

  • March 2, 2012 17:16

    3 Helpful Tools to Test Cross Browser Compatibility of Webpage http://t.co/FY0jh8Dn

  • March 2, 2012 16:43

    3 Helpful Tools to Test Cross Browser Compatibility of Webpage http://t.co/QUlYKInf #IE #FF #Chrome #Testing #CrossBrowser

  • March 2, 2012 12:52

    Top 5 Plugins to Build Contact Form for WordPress http://t.co/PWyR08Iq #WordPress #Plugins #ContactForm

  • June 11, 2011 02:49

    CSS 3 Transitions http://bit.ly/m0pK3t

Design Gala © 2012 All Rights Reserved

Designed by 76miles

Powered by WordPress

More in jQuery (5 of 18 articles)