4

Por exemplo tenho a div:

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

Gostaria de escrever sem que o html reconhecesse como uma tag mas sim um texto:

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

Porem não encontrei nenhuma forma de converter a tag em texto

3
  • 1
    É isso? pt.stackoverflow.com/q/49756/112052
    – hkotsubo
    Commented 12/02/2019 às 13:10
  • 3
    Talvez a resposta do itasouza resolva o problema. Porém, acredito que seja duplicada de: pt.stackoverflow.com/questions/59934/… Commented 12/02/2019 às 13:15
  • Aqui no fórum, as perguntas são negativas quando são muito simples ou por diversos outros motivos, para você que está começando, talvez seja bom ter mais opções de consulta, antes de fazer uma pergunta
    – Harry
    Commented 12/02/2019 às 13:15

3 Respostas 3

10

Como você quer mudar o conteúdo de uma <div> de HTML para texto pode usar a função abaixo:

O código abaixo está verificando o atributo data-content para mudar de HTML para texto ou 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>

Assim como o @AugustoVasques falou no comentário da resposta do @itasouza innerHTML irá transformar o texto em HTML, para que o texto não seja renderizado como HTML deve utilizar innerText.

Segue exemplo

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

Como vc colocou tag CSS na pergunta vou te dar uma resposta só com CSS.

Todo o conteúdo que vc coloca dentro de um content: de um pseudo-elemento é renderizado como texto e não como código, pois ele é um conteúdo que não existe no DOM do HTML, ele é construído no CSS.

Veja o exemplo e cloquei no checkbox.

input:checked + div::after {
    content: "<h1>minha tag</h1>"
}
<input type="checkbox" name="" id="">exibir tag
<div></div>


Opção 2

Vc tb pode escrever seu HTML direto em um custom attribute direto na tag (ex: <div data-html="<h1>meu h1</h1>">), depois vc pode usar um pseudo elemento com content:attr(data-html) para pegar o que está em data-html="" e colocar na tela.

input:checked + div::after {
    content: attr(data-html);
}
<input type="checkbox" name="" id="">exibir tag
<div data-html="<h1>meu h1</h1>"></div>

OBS1: Fiz esse exemplo da forma mais simples possível apenas para fins didáticos

OBS2: O inconveniente dessa técnica é que como o texto não está no DOM vc não consegue seleciona-lo para por exemplo dar um Ctrl+C / Ctrl + V

5

Veja se isso ajuda na solução:

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

<p id="demo" onclick="mudaConteudo()">Usando (innerHTML).</p>
2
  • 2
    Acho que se usar a propriedade innerText ao invés de innerHTML responde a pergunta: document.getElementById("demo").innerText= "<p>Outro texto</p>" Commented 12/02/2019 às 13:25
  • 1
    @AugustoVasques, talvez seja uma opção, o Leonardo deve testar e ver o que atende, eu fiquei surpreso agora, porque uma pergunta simples, vários tentaram ajudar sem ter nenhuma negativa
    – Harry
    Commented 12/02/2019 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .