How to do i get html to display on page instead of running?

Question

My problem seems to be the opposite of the problem most other people have. I do not want HTML in the .innerHTML to run. I want it to display on the page as is. (I know there is another problem in my code. I'm working on that)

https://jsfiddle.net/ojfykv17/ or

<div id="code">

</div>

    function genorateCode() {
      var account = document.getElementById("account");
        var url = document.getElementById("url");
        sendCode();
    }
    function sendCode() {
    document.getElementById('code').innerHTML = '<a href="'+url+'">'+'<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@'+account+'</div></a>';
    }
    sendCode();

    .button {
    border-radius: 5px;
    background-color: white;
    border:1;
    border-style: solid;
    position: fixed;
    padding: 5px 10px 5px 10px;
    border-width: 1.2px;
    line-height: 5px; 
    border-color: #a5aab1;
    font-family: 'Lato', sans-serif;
    font-weight:300;
    text-align: center;
    }

<form id="form" onsubmit="return false;">
        <input type="text" id="account" />
        <input type="text" id="url" />
        <input type="submit" onclick="genorateCode();" />
    </form>
    
    <div id="code">
    
    </div>

What do you mean you don't want it to run? Do you mean you want it to actually display the markup tags? If so, see this: http://stackoverflow.com/questions/2820453/display-html-code-in-html — Ian Emnace, Nov 08 '16 at 01:29
Here's a working version using a ``: https://jsfiddle.net/nq5qLvwu/ — , Nov 08 '16 at 01:39
@IanEmnace - I think you can substitute "interpreted" — as in _"I do not want HTML in the .innerHTML to be interpreted"_. — Stephen P, Nov 08 '16 at 01:51

score 4 · Answer 1 · answered Nov 08 '16 at 01:32

4

You will need to convert all the HTML tags from < and > to < and >. Otherwise the browser will render it as HTML.

answered Nov 08 '16 at 01:32

Lewis Marhin

124
3
9

2

Escaping `>` is not necessary if `<` is already escaped. – SeinopSys Nov 08 '16 at 01:41

score 4 · Accepted Answer · answered Nov 08 '16 at 01:38

4

Instead of setting innerHTML, set the innerText of the element.

document.getElementById('code').innerText = '<a href="'+url+ ...

answered Nov 08 '16 at 01:38

Stephen P

14,422
2
43
67

2

Obligatory note on [browser support](http://caniuse.com/#feat=innertext). Also check the linked [article](http://perfectionkills.com/the-poor-misunderstood-innerText/). – SeinopSys Nov 08 '16 at 01:40
That is a good article and I recommend anyone finding this answer reads it! – Stephen P Nov 08 '16 at 01:43

score 2 · Answer 3 · answered Nov 08 '16 at 01:47

There is couple of things need to edit in your code. The first function having local variable account and url, and after that you accessing it inside second function which is of course not in it scope.

var account,url;

function genorateCode() {
  // are you sure you want this document.getElementById("account")
  // instead if this -> document.getElementById("account").value ???
  account = document.getElementById("account").value;
  url = document.getElementById("url").value;
  sendCode();
}

And in your case, you can use insertAdjacentHTML like follow :

function sendCode() {  
  var str = '<a href="' + url + '">' + '<div class="button"><img src="https://s15.postimg.org/mfpd2ki8r/icon.png" width="16">@' + account + '</div></a>';
  document.getElementById('code').insertAdjacentHTML('beforeend', str);
}

DEMO

How to do i get html to display on page instead of running?

3 Answers3