How to write HTML as text within a div?

Question

For example I have the div:

<div class="option" id="resposta-1" onclick="mudaConteudo()"></div>

I would like to write without html recognizing as a tag but rather a text:

<div class="option" id="resposta-1" onclick="mudaConteudo()"><title></title></div>

However I couldn’t find any way to convert the tag into text

Answer 1

How you want to change the content of a <div> from HTML to text can use the function below:

The code below is checking the attribute data-content to switch from HTML to text or vice versa.

function mudaConteudo(){
  var area=document.getElementById("area");
  
  if (area.dataset.content == "html") {
    area.innerText = area.innerHTML;
    area.dataset.content = "text";
  } else {
    area.innerHTML = area.innerText;
    area.dataset.content = "html";
  }
}

<div id="area" data-content="html" ><h1>Alou!</h1></div>
<button onclick="mudaConteudo()">Muda Conteúdo</button>

Just like @Augustovasques said in the @itasouza reply comment innerHTML will transform the text into HTML, so that the text is not rendered as HTML should use innerText.

Following example

var content = "<h1>Alou!</h1>"
var area = document.getElementById('area');

function addTexto(){
  area.innerText = content;
}

function addHTML(){
  area.innerHTML = content;
}

<div id="area"></div>
<button onclick="addTexto()">Adiciona Texto</button>
<button onclick="addHTML()">Adiciona HTML</button>

Answer 2

How you put CSS tag in the question I’ll give you an answer only with CSS.

All the content you put inside one content: of a pseudo-element is rendered as text and not as code, because it is a content that does not exist in the DOM of HTML, it is built in CSS.

Look at the example and I checkbox.

input:checked + div::after {
    content: "<h1>minha tag</h1>"
}

<input type="checkbox" name="" id="">exibir tag
<div></div>

---

Option 2

You can also write your HTML directly in one custom attribute direct on the tag (ex: <div data-html="<h1>meu h1</h1>">), then you can use a pseudo element with content:attr(data-html) to take what is in data-html="" and put on the screen.

input:checked + div::after {
    content: attr(data-html);
}

<input type="checkbox" name="" id="">exibir tag
<div data-html="<h1>meu h1</h1>"></div>

OBS1: I made this example as simple as possible for educational purposes only

OBS2: The drawback of this technique is that as the text is not in the DOM vc can not select it to for example give a Ctrl+C / Ctrl + V

Answer 3

See if this helps in the solution:

<script>
function mudaConteudo() {
  document.getElementById("demo").innerHTML = "<p>Outro texto</p>";
}
</script>

<p id="demo" onclick="mudaConteudo()">Usando (innerHTML).</p>