write html in javascript code

Question

I have a slide toggle menu but can only place the word "MENU" in the javascript but would like to add an icon next to it.

How do I go about adding <i class="fa fa-bars"></i> next to the word MENU?

    $(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       $("#plus").text("MENU");
       $(".slidingDiv").slideDown();

   },function(){
       $("#plus").text("MENU");
       $(".slidingDiv").slideUp();
   });

});

Answer 1

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       $("#plus").html('<i class="fa fa-bars"></i> MENU');
       $(".slidingDiv").slideDown();

   },function(){
       $("#plus").html('<i class="fa fa-bars"></i> MENU');
       $(".slidingDiv").slideUp();
   });

});

Although you only need to set the menu item's html only once. No need to set it during showing AND hiding.

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();
   $("#plus").html('<i class="fa fa-bars"></i> MENU');

   $('.show_hide').toggle(function(){
       $(".slidingDiv").slideDown();

   },function(){
       $(".slidingDiv").slideUp();
   });

});