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

Question

Мне нужно установить текст внутри элемента 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
}

Answer 1

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

fieldNameElement.innerHTML = "My new text!";

Answer 2

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

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

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

fieldNameElement.textContent = "New text";

Answer 3

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" не является особенно описательным идентификатором или именем переменной.

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

в IE: -

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

в FF: -

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 в необработанном виде.

Answer 7

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

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

Answer 8

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

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

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