Jak zamienić tekst w elemencie div?

Muszę dynamicznie ustawić tekst w elemencie DIV. Jakie jest najlepsze, bezpieczne podejście do przeglądarki? Mam dostępne prototypejs i scriptaculous.

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

Oto jak będzie wyglądać funkcja:

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

Użyłbym updatemetody Prototype, która obsługuje zwykły tekst, fragment kodu HTML lub dowolny obiekt JavaScript, który definiuje toStringmetodę.

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

• Dokumentacja aktualizacji elementu

Możesz po prostu użyć:

fieldNameElement.innerHTML = "My new text!";

Zaktualizowano dla wszystkich, którzy to czytają w 2013 i później:

Ta odpowiedź ma dużo SEO, ale wszystkie odpowiedzi są poważnie nieaktualne i zależą od bibliotek, aby robić rzeczy, które wszystkie obecne przeglądarki robią po wyjęciu z pudełka.

Aby zamienić tekst w elemencie div, użyj Node.textContent, który jest dostępny we wszystkich obecnych przeglądarkach.

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

Zalety zrobienia tego w ten sposób:

1. Używa tylko DOM, więc technika ta jest przenośna do innych języków i nie opiera się na niestandardowym innerHTML
2. fieldName może zawierać kod HTML, który może być próbą ataku XSS. Jeśli wiemy, że to tylko tekst, powinniśmy utworzyć węzeł tekstowy, zamiast mieć przeglądarkę na parsowaniu go pod kątem HTML

Gdybym miał użyć biblioteki javascript, użyłbym jQuery i zrobiłbym to:

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

Zwróć uwagę, że komentarz @AnthonyWJones jest poprawny: „nazwa_pola” nie jest szczególnie opisowym identyfikatorem ani nazwą zmiennej.

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

Jedną z fajnych funkcji Prototype jest $('field_name')to samo, codocument.getElementById('field_name') . Użyj tego! :-)

Odpowiedź Johna Topleya wykorzystująca updatefunkcję Prototype to kolejne dobre rozwiązanie.

Szybką odpowiedzią jest użycie innerHTML (lub metody update prototypu, która prawie to samo). Problem z innerHTML polega na tym, że musisz uciec od przypisywanej treści. W zależności od celów będziesz musiał to zrobić z innym kodem LUB

w IE: -

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

w FF: -

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

(Właściwie FF mają następujący kod obecny)

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

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

Teraz mogę po prostu użyć innerText, jeśli potrzebujesz najszerszej możliwej obsługi przeglądarki, to nie jest to kompletne rozwiązanie, ale też nie używa innerHTML w surowym.

Jeśli naprawdę chcesz, abyśmy kontynuowali od miejsca, w którym skończyłeś, możesz zrobić:

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

nodeValue jest również standardową właściwością DOM, której możesz użyć:

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

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

Jeśli jesteś skłonny zacząć używać dużo JavaScript w swojej witrynie, jQuery sprawia, że ​​zabawa z DOM jest niezwykle prosta.

http://docs.jquery.com/Manipulation

Czyni to tak prostym jak: $ ("# nazwa-pola"). Text ("Jakiś nowy tekst.");

Użyj innerText, jeśli nie możesz przyjąć struktury - użyj danych Text #, aby zaktualizować test wydajności istniejącego tekstu

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

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

Oto prosty sposób na jQuery :

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

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

W HTML umieść to

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

W JavaScript umieść to

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