title: How to insert jQuery HTML string into HTML Document
body: <p>I'm having an issue with inserting jQuery HTML string into HTML document, more specifically into footer of my body of the html.</p>
  
  <p>The issue is when I append jQuery string which went through <code>$.parseHTML</code>, it appears on my screen and I can inspect it. Nonetheless, after I open <strong>View page source</strong>, I can't find it in the HTML.</p>
  
  <pre><code>let chatWindow = '&lt;section class="module"&gt;&lt;header class="top-bar"&gt;' + userName + '&lt;/header&gt;';
              chatWindow += '&lt;ol class="discussion"&gt;';
  
              for (let i = data[0].length - 2; i &gt;= 0; i -= 3) {
                  if (data[0][i - 1] == data[1]) {
                      chatWindow += '&lt;li class="self"&gt;&lt;div class="avatar"&gt;&lt;/div&gt;&lt;div class="messages"&gt;';
                  } else {
                      chatWindow += '&lt;li class="other"&gt;&lt;div class="avatar"&gt;';
                      chatWindow += '&lt;img src="' + data[2] + '"/&gt;&lt;/div&gt;&lt;div class="messages"&gt;';
                  }
                  chatWindow += '&lt;p&gt;' + data[0][i] + '&lt;/p&gt;';
              }
              chatWindow += '&lt;time datetime="2009-11-13T20:00"&gt;&lt;/time&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;';
              chatWindow += '&lt;textarea class="discussion-chat"&gt;&lt;/textarea&gt;&lt;/section&gt;';
  
              chatOutput = $.parseHTML(chatWindow);
              console.log(chatOutput);
  
              $('.module').css('display', 'block');
              $('footer').append(chatOutput);
  </code></pre>
  
  <p>To clarify my clunky code, it's just a pop-up chat window which is generated through <code>$.getJSON()</code> function. </p>
  
  <p>When I use <code>$.parseHTML</code>, it seems it gives me a correct format for DOM but append won't make it appear in the HTML.</p>
  
  <p>Any ideas how can I insert <code>chatWindow</code> var into my HTML?</p>
  
  <p>Thank you </p>