CODEWITHSUNDEEP
javascripthtmlpretty-print
Program-Me-Rev
Program-Me-Rev

Reputation: 6624

How to output prettified raw HTML code inside an Editable DIV

I have been trying to output raw HTML inside an editable DIV, but the <div> gets commented out.

This is what I am trying to output (Including the ``) :

\`<div class="flexContainer">HELLO WORLD</div>\`

This is what I get instead (Please NOTE HELLO WORLD is not wrapped inside a div) :

`HELLO WORLD`;

THE CALL

let htmlCode = `\`<div class="flexContainer">HELLO WORLD</div>\`;`;
document.getElementById(myEditableDIVInputArea_Id).innerHTML = js_beautify(<pre><code>${htmlCode}</code></pre>);

How can I get the raw HTML output?

Thank you all in advance.

Upvotes: 0

Views: 566

Answers (2)

apple apple
apple apple

Reputation: 10591

You can insert them as Text instead of HTML

let htmlCode = `\`<div class="flexContainer">HELLO WORLD</div>;\``
document.getElementById('x').innerText = htmlCode;
<div id=x contenteditable="true"></div>

Upvotes: 2

banyudu
banyudu

Reputation: 1092

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

let htmlCode = escapeHtml('<div class="flexContainer">HELLO WORLD</div>')
document.getElementById(myEditableDIVInputArea_Id).innerHTML = js_beautify(<pre><code>${htmlCode}</code></pre>);

Upvotes: 0

Related Questions