Wie ersetze ich Text in einem div-Element?

Ich muss den Text innerhalb eines DIV-Elements dynamisch festlegen. Was ist der beste, browser-sichere Ansatz? Ich habe Prototypen und Scriptaculous zur Verfügung.

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

So sieht die Funktion aus:

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

Ich würde die updateMethode von Prototype verwenden, die einfachen Text, ein HTML-Snippet oder ein beliebiges JavaScript-Objekt unterstützt, das eine toStringMethode definiert .

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

• Element.update-Dokumentation

Sie können einfach verwenden:

fieldNameElement.innerHTML = "My new text!";

Aktualisiert für alle, die dies 2013 und später lesen:

Diese Antwort hat viel SEO, aber alle Antworten sind stark veraltet und hängen von Bibliotheken ab, um Dinge zu tun, die alle aktuellen Browser sofort tun.

Verwenden Sie Node.textContent, das in allen aktuellen Browsern bereitgestellt wird, um Text in einem div-Element zu ersetzen.

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

Die Vorteile dieser Vorgehensweise:

1. Es wird nur das DOM verwendet, daher ist die Technik auf andere Sprachen portierbar und basiert nicht auf dem nicht standardmäßigen innerHTML
2. fieldName enthält möglicherweise HTML, bei dem es sich möglicherweise um einen versuchten XSS-Angriff handelt. Wenn wir wissen, dass es sich nur um Text handelt, sollten wir einen Textknoten erstellen, anstatt ihn vom Browser nach HTML analysieren zu lassen

Wenn ich eine Javascript-Bibliothek verwenden würde, würde ich jQuery verwenden und dies tun:

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

Beachten Sie, dass der Kommentar von @AnthonyWJones korrekt ist: "Feldname" ist keine besonders beschreibende ID oder Variablenname.

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

Eines der raffinierten Merkmale von Prototype ist, dass $('field_name')es dasselbe tut wiedocument.getElementById('field_name') . Benutze es! :-)

John Topleys Antwort mit der updateFunktion von Prototype ist eine weitere gute Lösung.

Die schnelle Antwort ist die Verwendung von innerHTML (oder der Aktualisierungsmethode des Prototyps, die so ziemlich dasselbe ist). Das Problem mit innerHTML ist, dass Sie dem zugewiesenen Inhalt entkommen müssen. Abhängig von Ihren Zielen müssen Sie dies mit anderem Code ODER tun

im IE: -

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

in FF: -

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

(Eigentlich von FF haben die folgenden in Code vorhanden)

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

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

Jetzt kann ich innerText nur verwenden, wenn Sie eine möglichst breite Browserunterstützung benötigen. Dies ist keine vollständige Lösung, aber innerHTML wird auch nicht im RAW verwendet.

Wenn Sie wirklich möchten, dass wir dort weitermachen, wo Sie aufgehört haben, können Sie Folgendes tun:

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

nodeValue ist auch eine Standard-DOM-Eigenschaft, die Sie verwenden können:

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

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

Wenn Sie dazu neigen, viel JavaScript auf Ihrer Website zu verwenden, macht jQuery das Spielen mit dem DOM extrem einfach.

http://docs.jquery.com/Manipulation

Macht es so einfach wie: $ ("# Feldname"). Text ("Ein neuer Text.");

Verwenden innertext wenn Sie nicht Struktur annehmen - Verwenden Sie Text # Daten vorhandenen Text aktualisieren Leistungstest

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

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

Hier ist eine einfache jQuery- Methode:

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

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

In HTML setzen Sie dies

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

In Javascript setzen Sie dies

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