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

Question

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 apparirà la funzione:

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

Answer 1

Vorrei usare il metodo update di Prototype che supporta il testo semplice, uno snippet HTML o qualsiasi oggetto JavaScript che definisce un metodo toString .

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

• Documentazione Element.update

Answer 2

Puoi semplicemente usare:

fieldNameElement.innerHTML = "My new text!";

Answer 3

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

Questa risposta ha molto SEO, ma tutte le risposte sono molto 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 Nodo .textContent, fornito in tutti i browser correnti.

fieldNameElement.textContent = "New text";

Answer 4

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 è portatile 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.

Answer 5

$('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 funzione update di Prototype è un'altra buona soluzione.

Answer 6

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 sono presenti i seguenti codici)

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 usa innerHTML in raw.

Answer 7

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

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

Answer 8

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

Answer 9

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

Answer 10

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 (" Alcuni nuovi testi. ");

Answer 11

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

Answer 12

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

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

Answer 13

Ecco un semplice jQuery :

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

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