How to write HTML as text within a div?

Asked

Viewed 2,746 times

4

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

  • 1

    Is that it? https://answall.com/q/49756/112052

  • 3

    Perhaps the Itasouza’s answer will solve the problem. However, I believe it is duplicated from: https://answall.com/questions/59934/como-scri-c%C3%B3digos-as-example-without-run

  • Here in the forum, the questions are negative when they are very simple or for several other reasons, for you who are starting, maybe it is good to have more query options, before asking a question

3 answers

10

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>

6

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

5

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>
  • 2

    I think if I use the property innerText instead of innerHTML answers the question: document.getElementById("demo").innerText= "<p>Outro texto</p>"

  • 1

    @Augustovasques, maybe it’s an option, Leonardo should test and see what answers, I was surprised now, because a simple question, several tried to help without having any negative

Browser other questions tagged

You are not signed in. Login or sign up in order to post.