'How can I format on server side so returned AJAX is formatted in the markup?

My server will return a hollow shell of an html page. In a simple example...

<html>
  <head>
    <title>end-user</title>
  </head>
  <body>
    <div id='prnt'>
    </div>
  </body>
</html>

It then does an AJAX request to return dynamic content. Again a simple example of the content...

  <div id='chld'>
    <div id='gndcld'>
      All kinds of stuff will go in here!
    </div>
  </div>

As the end-user is a developer that will take the markup and modify it for their own specialized use, I want the HTML markup to be formatted for ease of readability, with all the indentions and new lines. So the resulting markup would look something like...

<html>
  <head>
    <title>end-user</title>
  </head>
  <body>
    <div id='prnt'>
      <div id='chld'>
        <div id='gndcld'>
          All kinds of stuff will go in here!
        </div>
      </div>
    </div>
  </body>
</html>

So far I can return the content so that the browser rendering of the markup is what I want, but the markup itself is all in one line. I've tried various \r\n type combinations that either the browser doesn't like or it simply ignores. Is this even possible? If it is significant, the server code is C++ and I'm using plain JavaScript on the browser side. The server is a microcontroller, so there is not enough room for things like jQuery or other 3rd party libraries.

Thanks for any help you can provide.

(Edit 1) Per @NathanOliver suggestion.

I tried using the pre tag two ways: (1) where the hollow shell's parent div is replaced with a "pre"

<pre id='prnt'>
</pre>

(2) where the returning AJAX is surrounded by a "pre"

  <pre id='chld'>
    <div id='gndcld'>
      All kinds of stuff will go in here!
    </div>
  </pre>

In both cases the browser rendered versions look as expected, but also in both cases the html markup has all the CRLF's taken out and look like this respectively:

  <pre id="prnt">  <div id='chld'>     <div id='gndchld'>       All kinds of stuff will go in here!     </div>  </div></pre>

  <div id="prnt">  <pre id='chld'>     <div id='gndchld'>       All kinds of stuff will go in here!     </div>  </pre></div>

(Edit 2) This is the addition to address @Sam Space's request.

Strictly speaking, it doesn't really use AJAX. I used that simply as an explanation context - ie. Place markup from the server in an already resident markup page.

The server side is C++ code running on an ESP8266 microcontroller. The client side HTML/JavaScript was served from the same server using a home-made custom web server.

The client then starts a WebSocket and they talk back and forth using a custom asynchronous protocol using Json strings. This is all rock solid for years now.

This current feature is new. The request to the server is a Json message. I can make the server return any string necessary in any format to satisfy this need of placing formatted markup in the already resident page on the client. The client library takes the Json string sent, parses it out and the one field of that Json is the content in the example above. say...

  <pre id='chld'>
    <div id='gndcld'>
      All kinds of stuff will go in here!
    </div>
  </pre>

The client JavaScript is then simply using $('#prnt').innerHTML = string. No smoke and mirrors, no 3rd party... just simple assignment. I just can't find the magic sauce to make that string stay formatted with indentions and CRLF.

javascript ajax

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How can I format on server side so returned AJAX is formatted in the markup?

Sources

Related Questions