Как заменить текст внутри элемента div?

Мне нужно установить текст внутри элемента DIV динамически. Каков наилучший подход, безопасный для браузера? У меня есть prototypejs и scriptaculous.

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

Вот как будет выглядеть функция:

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

Я бы использовал updateметод Prototype, который поддерживает простой текст, фрагмент HTML или любой объект JavaScript, который определяет toStringметод.

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

• Документация Element.update

Вы можете просто использовать:

fieldNameElement.innerHTML = "My new text!";

Обновлено для всех, кто читает это в 2013 году и позже:

Этот ответ имеет много SEO, но все ответы сильно устарели и зависят от библиотек, чтобы делать то, что все современные браузеры делают из коробки.

Чтобы заменить текст внутри элемента div, используйте Node.textContent, который предоставляется во всех текущих браузерах.

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

Преимущества этого:

1. Он использует только DOM, поэтому метод переносим на другие языки и не использует нестандартный innerHTML
2. fieldName может содержать HTML, который может быть попыткой атаки XSS. Если мы знаем, что это просто текст, мы должны создать текстовый узел вместо того, чтобы браузер анализировал его на HTML

Если бы я собирался использовать библиотеку javascript, я бы использовал jQuery и сделал бы это:

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

Обратите внимание, что комментарий @AnthonyWJones является правильным: «field_name» не является особенно описательным идентификатором или именем переменной.

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

Одна из замечательных особенностей Prototype - $('field_name')это то же самое, что иdocument.getElementById('field_name') . Используй это! :-)

Ответ Джона Топли с использованием updateфункции Prototype - еще одно хорошее решение.

Быстрый ответ заключается в использовании innerHTML (или метода обновления прототипа, который почти идентичен). Проблема с innerHTML в том, что вам нужно экранировать назначаемый контент. В зависимости от ваших целей вам нужно будет сделать это с другим кодом ИЛИ

в IE: -

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

в ФФ: -

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

(На самом деле FF имеют следующий код)

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

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

Теперь я могу просто использовать innerText, если вам нужна максимально широкая поддержка браузера, тогда это не полное решение, но и не использует innerHTML в сыром виде.

Если вы действительно хотите, чтобы мы просто продолжили с того места, где вы остановились, вы можете сделать:

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

nodeValue также является стандартным свойством DOM, которое вы можете использовать:

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

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

Если вы склонны начать использовать много JavaScript на своем сайте, jQuery сделает игру с DOM чрезвычайно простой.

http://docs.jquery.com/Manipulation

Делает это так же просто, как: $ ("# field-name"). Text ("Некоторый новый текст.");

Используйте innerText, если вы не можете принять структуру - Используйте Text # data для обновления существующего текста Performance Test

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

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

Вот простой способ jQuery :

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

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

В HTML вставьте это

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

В JavaScript положи это

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