Come posso sostituire il testo all'interno di un elemento div?

Devo impostare dinamicamente il testo all'interno di un elemento DIV. Qual è il miglior approccio sicuro per i browser? Ho prototypejs e scriptaculous disponibili.

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

Ecco come sarà la funzione:

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

Vorrei utilizzare il updatemetodo di Prototype che supporta il testo normale, uno snippet HTML o qualsiasi oggetto JavaScript che definisce un toStringmetodo.

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

• Documentazione Element.update

Puoi semplicemente usare:

fieldNameElement.innerHTML = "My new text!";

Aggiornato per tutti coloro che leggono questo nel 2013 e in seguito:

Questa risposta ha molto SEO, ma tutte le risposte sono gravemente obsolete e dipendono dalle librerie per fare cose che tutti gli attuali browser fanno immediatamente.

Per sostituire il testo all'interno di un elemento div, utilizzare Node.textContent, fornito in tutti i browser correnti.

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));
}

I vantaggi di farlo in questo modo:

1. Utilizza solo il DOM, quindi la tecnica è portabile in altre lingue e non si basa sull'HTML interno non standard
2. fieldName potrebbe contenere HTML, che potrebbe essere un tentativo di attacco XSS. Se sappiamo che è solo testo, dovremmo creare un nodo di testo, invece di far analizzare il browser per HTML

Se avessi usato una libreria javascript, avrei usato jQuery e avrei fatto questo:

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

Nota che il commento di @AnthonyWJones è corretto: "field_name" non è un ID particolarmente descrittivo o un nome di variabile.

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

Una delle caratteristiche eleganti di Prototype è che $('field_name')fa la stessa cosa di document.getElementById('field_name'). Usalo! :-)

La risposta di John Topley usando la updatefunzione di Prototype è un'altra buona soluzione.

La risposta rapida è usare innerHTML (o il metodo di aggiornamento del prototipo che è praticamente la stessa cosa). Il problema con innerHTML è che devi evitare il contenuto assegnato. A seconda dei tuoi obiettivi dovrai farlo con un altro codice OPPURE

in IE: -

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

in FF: -

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

(In realtà di FF hanno il seguente presente in codice)

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

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

Ora posso usare innerText se hai bisogno del più ampio supporto possibile per il browser, quindi questa non è una soluzione completa, ma nemmeno sta usando innerHTML in raw.

Se vuoi davvero che continuiamo da dove eri rimasto, potresti fare:

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

nodeValue è anche una proprietà DOM standard che è possibile utilizzare:

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 sei propenso a iniziare a utilizzare molto JavaScript sul tuo sito, jQuery rende estremamente semplice giocare con il DOM.

http://docs.jquery.com/Manipulation

Lo rende semplice come: $ ("# field-name"). Text ("Some new text.");

Usa innerText se non puoi assumere la struttura - Usa i dati di testo # per aggiornare il test delle prestazioni del testo esistente

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

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

Ecco un modo semplice per jQuery :

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

el.html(el.html().replace(/Old Text/ig, "New Text"));

In HTML metti questo

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

In Javascript metti questo

var fieldNameElement = document.getElementById('field_name');
        if (fieldNameElement)
        {fieldNameElement.innerHTML = 'some HTML';}