title: jQuery - replace (text) content
body: <ul>
  <li><h2>SCENARIO</h2>
  </li>
  </ul>
  <p>I have the following HTML code snippet:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      TEXT
      &lt;p&gt; PARAGRAPH 1 &lt;/p&gt;
      &lt;p&gt; PARAGRAPH 2 &lt;/p&gt;
      &lt;p&gt; PARAGRAPH 3 &lt;/p&gt;
      &lt;p&gt; PARAGRAPH 4 &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am required to change the plain text using JS/jQuery, using the HTML DOM methods.</p>
  <ul>
  <li><h2>PROBLEM</h2>
  </li>
  </ul>
  <p>** I can access the &quot;plain text&quot; node using</p>
  <pre><code>document.getElementsByClassName(&quot;container&quot;)[0].childNodes[0]
  </code></pre>
  <p>** However, I can't use the <code>innerHTML</code>, as it returns &quot;<code>undefined</code>&quot;:</p>
  <pre><code>document.getElementsByClassName(&quot;container&quot;)[0].childNodes[0].innerHTML
  </code></pre>
  <p>** Using the <code>replaceChild</code> method doesn't work either (it triggers an <code>Uncaught DOMException</code> at the console log).</p>
  <pre><code>    var textnode = document.createTextNode(&quot;THE TEXT HAS BEEN REPLACED&quot;);
      
      var element = document.getElementsByClassName(&quot;container&quot;)[0].childNodes[0];
  
      item.replaceChild(textnode, item);
  </code></pre>
  <p>** And finally, using</p>
  <pre><code>document.getElementsByClassName(&quot;container&quot;)[0].innerHTML
  </code></pre>
  <p>selects all the HTML content inside <code>&lt;div class=&quot;container&quot;&gt;</code>.</p>
  <p>Is there any way I can access the text content of &quot;TEXT&quot; and change it dynamically?</p>
  <ul>
  <li><h2>JSFIDDLE</h2>
  </li>
  </ul>
  <p><a href="http://jsfiddle.net/kouk/4otbqc75/" rel="nofollow noreferrer">http://jsfiddle.net/kouk/4otbqc75/</a></p>