jquery - Clicking a div changes the contents of another div -

i know question has been asked here: clicking div changes div's content

but still having problems "transposing" concept on page.

i have 2 div elements 1 id of "content" , div called "html"

basically want change content of div "content" - when div "html" clicked. there 3 other divs adding in future need know how apply same thing other divs. know redundant question, first venture jquery , want understand i'm doing instead of copy , paste , hope modify when don't have clue. don't want handed fish when can learn fish. in advanced.

<div id="footer">         <div id="html">            html div         </div>        <div id="content">          <p>please select topic below.</p>        </div> </div>  $(document).ready(function(){  /// when document loaded execute function     $("#html").click(function(){ //when element id 'html' click execute function          $("#content").html("new text"); // replace contents of element id 'content'        } ); }); 

$("#html") equivaluent document.getelementbyid("html") wrapped in jquery.

$("#html").click(); triggers programmatic click event :)

$("#html").click(function(){alert("here");}); //registers function need executed when element id 'html' clicked

$("#content").html(); // returns innerhtml

$("#content").html("new");// changes innerhtml

live demo