well formated code inside the HTML code tag using jQuery

Question

I'd like to display some well formatted HTML on my page. That HTML will be compiled in the script. To show that HTML I am using < pre ><code> HTML CONTENT </code>< /pre >

The problem is I have no Idea how to add line breaks and other formatting to the variable that is compiling the HTML.

MY SCRIPT:

var CodeShow = '<div id="builder" class="' + LoginClasses + '">
                <form id="LoginForm" class="formContainer' + FormClasses + '">
                </form></div>';
$('#CodeShow').text(CodeShow);

Expected HTML Result:

 <code>
    <div id="builder" class="classA">
          <form id="LoginForm" class="formContainer classB"></form>
    </div>
 </code>

This is a sample HTML however the real HTML has number of lines.

@The_Death_Raw your code works but the output is going too wide since there are number of classes assigned to few elements. even used white-space: pre-line on the <code> but didn't work :( Also, please reply as an answer so that I am mark it. Thanks — kamran shah
– kamran shah, Commented Dec 20, 2017 at 11:49

SKJ · Accepted Answer · 2017-12-20 21:42:33Z

1

var LoginClasses = " classA", FormClasses = " classB";
var CodeShow = '<div id="builder" class="' + LoginClasses + '"> \n <form id="LoginForm" class="formContainer' + FormClasses + '"> \n </form> \n </div>';
$(function() {
  $('#Code').html(CodeShow);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="#CodeShow"><code id="#Code"></code></pre>

answered Dec 20, 2017 at 21:42

SKJ

2,4371 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GIGO · Accepted Answer · 2017-12-21 09:38:24Z

0

When I saw you using .text() I assumed you want to display the result on your webpage. Not just to take effect in your browser. Anyway to display this on the webpage.

var LoginClasses = " classA", FormClasses = " classB";

var CodeShow = `&lt;div id="builder" class= "${LoginClasses}"&gt;
   &lt;form id = "LoginForm" class ="formContainer ${FormClasses}"&gt;

   &lt;/form&gt;
&lt/div&gt`;

$(function(){
    $('#CodeShow code').html(CodeShow);
})

edited Dec 21, 2017 at 9:38

answered Dec 21, 2017 at 9:18

GIGO

689 bronze badges

Collectives™ on Stack Overflow

well formated code inside the HTML code tag using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related