title: Python 3+ | Flask / SocketIO | How to update page (no refresh) with new HTML?
body: <p>Recently I have been trying to create a web app.
  Unfortunately I don't have much experience with JS, jQuery and similar functioning languages.</p>
  
  <p>I mainly write in Python 3.5+ and the application I have written is a mixture of the following:
  Python 3.6
  Anaconda 3
  jQuery (examples only, not self-written)
  HTML</p>
  
  <p>The setup is as follows.</p>
  
  <pre><code>Client request -&gt; Nginx reverse proxy -&gt; Gunicorn -&gt; Flask
  </code></pre>
  
  <p>I have currently got an example application running, which is really helpful for me to understand the inner workings, however, it's not quite so purpose driven and I feel I've been lead astray with SocketsIO.</p>
  
  <p>What is my objective you ask?
  I want users to be able to submit a form, upon form submission, place the data from the forms into a second "section" or "content section" within the same page.
  Now, whilst this would be very simple if I would be happy with plaintext being updated on the page (without refresh), unfortunately, I would like to go one step further and render new HTML content, instead of a plaintext <code>"&lt;p&gt;"</code> looking message.</p>
  
  <p>For example, we emit a message that submitted by a form. 
  The original outcome would be;</p>
  
  <pre><code>&lt;p&gt;This is a message&lt;/p&gt;
  </code></pre>
  
  <p>However, I would like something more along the lines of;</p>
  
  <pre><code>&lt;form&gt;&lt;input type="text" value="This is a message"&gt;&lt;input type="submit"&gt;&lt;/form&gt;
  </code></pre>
  
  <p>The ultimate goal, would be to "queue" submissions to be reviewed after all form submits are done.</p>
  
  <p>Where am I stuck?
  I am able to show the content I want after submission, but I cannot make it render the message as html instead.</p>
  
  <p>Currently the output of the message looks like this;</p>
  
  <pre><code>&lt;input type="text" value="Recently added: test test"&gt;
  </code></pre>
  
  <p>Where "test test" was added to the message with two separate form inputs.</p>
  
  <p>Providing snippets:</p>
  
  <p>app.py;</p>
  
  <pre><code>@app.route('/')
  def index():
      return render_template('index.html', async_mode=socketio.async_mode)
  
  
  @socketio.on('my_event', namespace='/test')
  def test_message(message):
      emit('my_response',
           {'data': 'Recently added: '+message['data']+'   '+message['password']})
  </code></pre>
  
  <p>Within the main template we have some JS to catch the submits.</p>
  
  <pre><code>socket.on('my_response', function(msg) {
                  $('#log').append('&lt;br&gt;' + $('&lt;div/&gt;').text('&lt;input type="text" value="' + msg.data + '"&gt;').html());
              });
  </code></pre>
  
  <p>And also inside the main template we have the form that we submit the data via;</p>
  
  <pre><code>&lt;form id="emit" method="POST" action='#'&gt;
      &lt;input type="text" name="emit_data" id="emit_data" placeholder="Message"&gt;
      &lt;input type="text" name="password" id="password" placeholder="Other Message"&gt;
      &lt;input type="submit" value="Echo"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And finally inside of the main template again, we have the "" that will hold the data;</p>
  
  <pre><code>&lt;h2&gt;Receive:&lt;/h2&gt;
      &lt;div id="log"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Disclaimer:
  I have attempted to provide as much information as possible, however, should you feel there is more information you require in order to provide an accurate answer, please feel free to comment and I will reply as best I can.</p>
  
  <p>Kind regards,</p>