Using Alert() to display actual HTML code

Question

Is there a way to use alert() or another pop-up to display actual HTML code that? For example, I have the code below:

    var range = selection.getRangeAt(0); 
    var newNode = document.createElement('span');
    newNode.setAttribute("class", "selectedText");
    range.surroundContents(newNode);

I want to use an alert to display the HTML result of

range.surroundContents(newNode);

It should display something like

<span class='selectedText'>'range will go in here'</span>.

Which is what I want to validate.Thanks!

@echopeak thanks! that's exactly what I was looking for....is outerHTML supported on all browsers — DRE, Apr 12 '16 at 15:51
consider using `console.log` or any of the `console.*` functions for debugging instead of `alert`. — zzzzBov, Apr 12 '16 at 15:59

score 0 · Answer 1 · answered Apr 12 '16 at 15:53

0

You can assign the html to a variable & alert that variable

HTML

<span class='selectedText' id ="someId">range will go in here</span>

JS

var a = document.getElementById("someId").outerHTML;
alert(a)

Working Example

answered Apr 12 '16 at 15:53

brk

48,835
10
56
78

score 0 · Answer 2 · edited May 23 '17 at 12:07

You can use jQuery to set the element's textproperty.

var htmlstring = "<span class='selectedText'>'range will go in here'</span>"
$("div.selectedText").text(htmlstring);
var htmlescaped = $("<div>").text(htmlstring).html();

That block there will end up with the string <span class='selectedText'>'range will go in here'</span>, which is an escaped version of your html, which can be printed any way you like.

Note that this method may encounter difficulties with newlines (\n) and some types of whitespace.

Source.

Using Alert() to display actual HTML code

2 Answers2