Wie kann ich Text in einem div-Element ersetzen?

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

  •  02-07-2019
  •  | 
  •  

Frage

Ich muss dynamisch den Text in einem DIV-Element setzen. Was ist der beste Browser sicher Ansatz? Ich habe PrototypeJS und scriptaculous zur Verfügung. 

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

Hier ist, was die Funktion aussehen wird: 

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

Lösung

würde ich Prototype update Methode verwenden, den Text, einen HTML-Snippet oder ein JavaScript-Objekt unterstützt, die eine toString Methode definiert. 

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

Andere Tipps

Sie können einfach verwenden: 

fieldNameElement.innerHTML = "My new text!";

Aktualisiert für alle diese im Jahr 2013 zu lesen und später:

Diese Antwort hat eine Menge von SEO, aber alle Antworten sind stark veraltet und hängen von Bibliotheken, Dinge zu tun, dass alle aktuellen Browser aus dem Kasten heraus zu tun.

Um Text in einem div-Elemente zu ersetzen, verwenden Knoten .textContent, die in allen aktuellen Browsern zur Verfügung gestellt. 

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 der es auf diese Weise tun:

  1. Es verwendet nur den DOM, so ist die Technik auf andere Sprachen tragbar und beruht nicht auf dem Nicht-Standard-innerHTML-
  2. Feldname enthält möglicherweise HTML, die einen versuchten XSS-Angriff sein könnte. Wenn wir es nur Text kennen, sollten wir einen Textknoten erschaffen, anstatt dass der Browser analysiert es für HTML

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


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

Beachten Sie, dass @AnthonyWJones' Kommentar ist korrekt: „field_name "ist keine besonders beschreibend ID oder Variablennamen. 

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

Einer der netten Features von Prototype ist, dass $('field_name') das Gleiche wie document.getElementById('field_name') tut. Benutze es! : -)

John Topley Antwort mit Prototype update Funktion ist auch eine gute Lösung.

Die schnelle Antwort ist innerHTML- zu verwenden (oder Update-Methode des Prototyps, der so ziemlich das gleiche). Das Problem mit innerHTML- ist, müssen Sie den Inhalt entkommen zugeordnet ist. Je nach Ihren Zielen benötigen Sie, dass mit anderem Code zu tun ODER

in IE: - 

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

in FF: - 

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

(Eigentlich von FF haben die folgenden in durch Code) 

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

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

Jetzt kann ich nur innertext verwenden, wenn Sie eine möglichst breite Browser-Unterstützung benötigen, dann ist dies keine vollständige Lösung, aber weder mit innerHTML- im rohen.

Wenn Sie uns wirklich wollen einfach nur weitermachen, wo Sie aufgehört haben, könnten Sie 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 geneigt viel JavaScript auf Ihrer Website zu beginnen, macht jQuery mit dem DOM spielen extrem einfach.

http://docs.jquery.com/Manipulation

Macht es so einfach wie: $ ( "# Feldname") Text ( "Einige neue Text.");.

Mit Innertext, wenn Sie können nicht davon ausgehen, Struktur - Text # Daten verwenden, um vorhandenen Text zu aktualisieren Leistung Test 

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 Art und Weise: 

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

el.html(el.html().replace(/Old Text/ig, "New Text"));
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top