jquery - How to call two functions, one after another, using the same button? -

here's trying to:

$(document).ready(function() {     $("button").click(function() {         $("#div1").remove();     }); // missing function end  });  $("#div1").("<b>appended text</b>"); }); 

html

 <div id="div1" style="border:1px solid black;background-color:gray;">      <p>this paragraph in div.</p>     <p>this paragraph in div.</p>   </div>      <button id="btn1">remove div element</button> 

how can jquery?

javascript functions called in order put them in code within event handler can call .empty() before calling .append() add new text , can chain 2 commands 1 after other don't have reevaluate selector:

<script> $(document).ready(function() {     $("button").click(function() {         $("#div1").empty().append("<b>appended text</b>");     }); }); </script> 

or, assign html , skip .remove() replace html in element this:

<script> $(document).ready(function() {     $("button").click(function() {         $("#div1").html("<b>appended text</b>");     }); }); </script> 

note: .remove() removes containing element , contents doesn't want do. if want clear element contents, can use .empty(). but, in case, simpler assign new contents replaces previous contents using .html().