How to make html appear on the page instead of launching?

Question

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

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>

Run codeHide result

Answer 1

Instead of installing, innerHTMLinstall the innerTextitem.

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

Answer 2

HTML < > &lt; &gt;. HTML.

Answer 3

There are a few things you need to change in your code. The first function has a local variable accountand url, after which you get access to it in the second function, which, of course, is not included in it.

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, as shown below:

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