title: Appending child node by javascript
body: <p>I have dynamically generated html thru ajax when a page is loading, something like this,</p>
  <h3>Dynamically inserted,</h3>
  <pre><code>&lt;p class=&quot;Hello&quot;&gt;
    &lt;span id='click lvl1'&gt;1&lt;/span&gt;
    &lt;span&gt;2&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  <p>Now, I am trying to add another node into my <code>&lt;p&gt;</code> element. Again, dynamically thru ajax.</p>
  <h3>Server response is something like,</h3>
  <pre><code>&lt;p class=&quot;Hello lvl2&quot;&gt;
    &lt;span id='click'&gt;1&lt;/span&gt;
    &lt;span&gt;2&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  <p>Which I want to insert into the element which I have got first time.</p>
  <h3>final result,</h3>
  <pre><code>&lt;p class=&quot;Hello&quot;&gt;
    &lt;span id='click'&gt;1&lt;/span&gt;
    &lt;span&gt;2&lt;/span&gt;
    &lt;p class=&quot;Hello lvl2&quot;&gt;
     &lt;span id='click'&gt;1&lt;/span&gt;
     &lt;span&gt;2&lt;/span&gt;
    &lt;/p&gt;
  &lt;/p&gt;
  </code></pre>
  <p>While making an <em><strong>second</strong></em> ajax call I am getting reference to <code>&lt;span id='click lvl1'&gt;1&lt;/span&gt;</code> element.</p>
  <hr />
  <h3>What have I tried so far?</h3>
  <p>Everthing, I could try I have tried but I am not able to inset the node. I am assuming that I am doing something really wrong. My attempts are,</p>
  <h3>pElement is <code>&lt;span id='click'&gt;1&lt;/span&gt;</code></h3>
  <ol>
  <li><code>pElement.parent().appendChild(data.expandTreeVal);</code></li>
  <li><code>pElement.parent().append(data.expandTreeVal);</code></li>
  <li><code>pElement.parent().after(data.expandTreeVal);</code></li>
  <li><code>pElement.parentNode().appendChild(data.expandTreeVal);</code></li>
  </ol>
  <h2>Debugging</h2>
  <p>Do I really get anything from server?</p>
  <p>Yes, When I do <code>alert(data.expandTreeVal);</code> it shows me my desired HTML.</p>
  <p>any thoughts will be a great help.</p>