title: Use javascript to change text only in an element
body: <p>Is there a simple way to change the text of an element only using vanilla javascript? In the code below, I thought that using <code>.textContent</code>, rather than <code>.innerHTML</code> would change the text and leave the image behind.  </p>
  
  <pre><code>&lt;head&gt;
      &lt;script&gt;
          function change_stuff() {
              var div = document.getElementById('to_change');
              div.textContent = "OMG...it's an image!";
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="to_change"&gt;
          This is a huge block of text that I want to replace while leaving the image in place
          &lt;img src="./the_image.jpg"&gt;
      &lt;/div&gt;
      &lt;button onclick="change_stuff();"&gt;
          ThE dOER!!
      &lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've also tried but had little to no success with many variations of this:</p>
  
  <pre><code>function change_stuff() {
      var div = document.getElementById('to_change');
      var text = div.textContent;
  
      div.textContent = text.replace(text, "");
  }
  </code></pre>
  
  <p>Any help would be appreciated</p>