title: Change Div Content
body: <p>I need help for my code to work. I know there are similar problem here but all the answer doesn't work on mine. So my problem is I want to change the content of Div by clicking one of my link. Here's my code.</p>
  <pre><code>        &lt;div id=&quot;left&quot;&gt;
               &lt;h1&gt;Welcome to This Section&lt;/h1&gt;
               &lt;h1&gt;Welcome to This Content&lt;/h1&gt;
          &lt;/div&gt;
  </code></pre>
  <p>and Here is my link</p>
  <pre><code>
             &lt;div id=&quot;green2&quot; class=&quot;block&quot;&gt;
                 &lt;a href=&quot;#&quot; id=&quot;about&quot;&gt;About&lt;/a&gt;
                 &lt;i class=&quot;fa fa-keyboard-o&quot;&gt;&lt;/i&gt;
             &lt;/div&gt;
  
  </code></pre>
  <p>and this is my JQuery</p>
  <pre><code>$(document).ready(function(){
  
     $(document).on('click', '.about', function(){
         document.getElementById(&quot;left&quot;).innerHTML = &quot;&lt;p&gt;This is a &lt;span&gt;new&lt;/span&gt; paragraph&lt;/p&gt;&quot;;
     });
  
  });
  
  </code></pre>
  <p>I just want to change everything in div with the id &quot;left&quot; but seems like there is something wrong. Any help would be appreciated. Thanks in advance.</p>