title: Setting button title in HTML to a non-formatted text
body: <p>I have a simple html page</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;button type="button" id="button1" onclick="foo()"&gt;Result!&lt;/button&gt;
    &lt;script type="text/javascript"&gt;
    function foo() {
      var button = document.getElementById("button1");
    }
    &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p></p>
  
  <p>I want to change the button title on click.<br>
  The title might include HTML tags and I want it to be presented as is (without formatting).</p>
  
  <p>I've tried the way suggested in <strong><a href="https://stackoverflow.com/questions/8542000/setting-a-buttons-value-using-javascript">this</a></strong> post and it works great for a regular text. Unfortunately it formats the HTML tags and doesn't present the non-formatted text: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;button type="button" id="button1" onclick="foo()"&gt;Result!&lt;/button&gt;
    &lt;script type="text/javascript"&gt;
    function foo() {
      var button = document.getElementById("button1");
      button.innerHTML = "&lt;strong&gt;my text&lt;/strong&gt;"
    }
    &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To be clear, I want the title to be <code>&lt;strong&gt;my text&lt;/strong&gt;</code> and not <strong>my text</strong>.   </p>
  
  <p>So what is the right way to present a non-formatted text inside the button?</p>