I am using jQuery, and have an HTML block as follows:

   <div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
    </div>

Which renders as:

Heading 1

Heading 2

Heading 3

What I am trying to do is show what HTML was used to create this block.

If I use $(this).clone().insertAfter(this); simply repeats what we see rendered, but what I actually want to see in my browser is:

<div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
 </div>

What's the best way to do this?

I am using jQuery, and have an HTML block as follows:

   <div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
    </div>

Which renders as:

Heading 1

Heading 2

Heading 3

What I am trying to do is show what HTML was used to create this block.

If I use $(this).clone().insertAfter(this); simply repeats what we see rendered, but what I actually want to see in my browser is:

<div id="html-block">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
 </div>

What's the best way to do this?

• javascript
• jquery

• document.getElementById('html-block').outerHTML – Rayon Commented Oct 24, 2016 at 5:49
• Are you talking about having the html tags visible to the user? Try setting text, which will HTML-encode the passed value: $('<div/>', { text: $(this).html() }).insertAfter(this);. Can also be called as a function container.text( ... ) – David Hedlund Commented Oct 24, 2016 at 5:53
• try .append() ? – Donald Wu Commented Oct 24, 2016 at 5:55
• Yes HTML tags visible in the browser – rlsaj Commented Oct 24, 2016 at 5:56

4 Answers 4

What you need to be able to do is escape the HTML before you output it so that the browser doesn't render the tags contained therein.

You can escape HTML easily using jQuery like this:

var escapedHtml = $('<div />').text($('#html-block').html());

Now you have a string with things like <div id="html-block"> which you can spit out to the browser:

$('#html-block').after($('<pre />').html(escapedHtml));

All in one you could do this:

var $htmlBlock = $('#html-block');
$('<pre />').text($htmlBlock.html()).insertAfter($htmlBlock);

Also see this duplicate: Escaping HTML strings with jQuery

var entityMap = {
  "&": "&",
  "<": "&lt;",
  ">": "&gt;",
  '"': '&quot;',
  "'": '&#39;',
  "/": '&#x2F;'
};

function escapeHtml(string) {
  return string.replace(/[&<>"'\/]/g, function (s) {
    return entityMap[s];
  });
}

... then use

var outer = escapeHTML($(this).clone().outerHTML);
$(outer).insertAfter(this);

var el = $("#html-block")
var html = el[0].outerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;");
el.after(html)

Notes:

• el[0] gets the actual HTML dom element (as opposed to the jQuery-wrapped element)
• outerHTML gets the HTML of the element itself (not just its contents)
• the replace tags escape the "<" and ">" characters, which are what tells the browser to render the tags as tags and not just text.

Hope that helps!

EDIT: Oh, just saw the other answers; they're better :-)

str = "250m<sup>2</sup>";
let entityMap = {
   "&lt;": "<",
   "&gt;": ">",
};
str = str.replace(/(&lt;)|(&gt;)/g, m => entityMap[m]);

console.log(str);