Como faço para substituir o texto dentro de um elemento div?

StackOverflow https://stackoverflow.com/questions/121817

  •  02-07-2019
  •  | 
  •  

Pergunta

Eu preciso definir o texto dentro de um elemento DIV dinamicamente. Qual é o melhor seguro navegador abordagem,? Eu tenho PrototypeJS e scriptaculous disponível. 

<div id="panel">
  <div id="field_name">TEXT GOES HERE</div>
</div>

Aqui está o que a função será algo como: 

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}
Foi útil?

Solução

Gostaria de usar método update de Prototype que suporta texto simples, um trecho de HTML ou qualquer objeto JavaScript que define um método toString. 

$("field_name").update("New text");

Outras dicas

Você pode simplesmente usar: 

fieldNameElement.innerHTML = "My new text!";

Atualizado para todos lendo este em 2013 e mais tarde:

Esta resposta tem um monte de SEO, mas todas as respostas estão severamente fora da data e dependem de bibliotecas para fazer coisas que todos os navegadores atuais fazem fora da caixa.

Para substituir o texto dentro de um elemento div, use Node .textContent, que é fornecido em todos os navegadores atuais. 

fieldNameElement.textContent = "New text";


function showPanel(fieldName) {
  var fieldNameElement = document.getElementById("field_name");
  while(fieldNameElement.childNodes.length >= 1) {
    fieldNameElement.removeChild(fieldNameElement.firstChild);
  }
  fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

As vantagens de fazê-lo desta maneira:

  1. Ele só usa o DOM, de modo que a técnica é portátil para outros idiomas, e não contar com o não-padrão innerHTML
  2. fieldName pode conter HTML, o que poderia ser um ataque XSS tentada. Se nós sabemos que é apenas texto, que deve ser a criação de um nó de texto, em vez de ter o navegador analisá-lo para HTML

Se eu estivesse indo para usar uma biblioteca javascript, eu uso jQuery, e fazer isso: 


  $("div#field_name").text(fieldName);

Note que @AnthonyWJones' comentário está correto: "field_name "não é um ID particularmente descritivo ou nome da variável. 

$('field_name').innerHTML = 'Your text.';

Uma das características interessantes de Prototype é que $('field_name') faz a mesma coisa que document.getElementById('field_name'). Use-o! : -)

A resposta de John Topley usando a função update de Prototype é outra boa solução.

A resposta rápida é usar innerHTML (ou método de actualização do protótipo que praticamente a mesma coisa). O problema com innerHTML é que você precisa para escapar do conteúdo que está sendo atribuído. Dependendo de suas metas você terá que fazer isso com outro código OR

no IE: - 

document.getElementById("field_name").innerText = newText;

no FF: - 

document.getElementById("field_name").textContent = newText;

(Na verdade de FF ter a seguinte presente em pelo código) 

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

Agora eu posso usar apenas innerText se você precisar de maior apoio navegador possível, então esta não é uma solução completa, mas não está usando innerHTML na matéria.

Se você realmente quer que a gente simplesmente continuar de onde parou, você poderia fazer: 

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';

nodeValue é também uma propriedade DOM padrão que você pode usar: 

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

Se você está inclinado a começar a usar um monte de JavaScript em seu site, jQuery faz jogar com o DOM extremamente simples.

http://docs.jquery.com/Manipulation

torna tão simples como: $ ( "# Field-name") texto ( "Alguns texto novo.");.

Use innerText se você não pode assumir estrutura - Usar dados texto # para atualizar texto existente Teste de Desempenho 

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}

Aqui está um jQuery caminho mais fácil: 

var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top