title: Make selected text bold/unbold with jQuery
body: <p>I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML</p>
  
  <p>The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>(function ($) {
      $.fn.text_editor = function(options) {
          this.each(function() {
              var buttons = {
                  buttons: ['bold', 'italic', 'underline']
              };
              var parametres = $.extend(buttons, options);
              // generated html 
                  $("body").html("&lt;div class=\"container\"&gt;");
                      $("body").append("&lt;h1 style=\"padding-left:55px;\"&gt;text editor&lt;/h1&gt;");
                      $("body").append("&lt;textarea rows=\"10\" cols=\"50\"&gt;&lt;/textarea&gt;");
                      $("body").append("&lt;br&gt;");
                          $("body").append("&lt;div class=\"buttons\"");
                              $("body").append("&lt;button id=\"bold\"&gt;gras&lt;/button&gt;");
                              $("body").append("&lt;button id=\"italic\"&gt;italic&lt;/button&gt;");
                              $("body").append("&lt;button id=\"barre\"&gt;underline&lt;/button&gt;");
  
              // js
              $("bold").execCommand("bold");
              $("italic").execCommand("italic");
              $("underline").execCommand("underline");
              console.log($("bold"));
          });
      };
  })(jQuery);
  
  $(document).ready(function() {
      $("textarea").text_editor()
  });
  </code></pre>