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

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

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

Здесь будет выглядеть функция:

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

Ответ 1

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

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

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

Ответ 2

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

fieldNameElement.innerHTML = "My new text!";

Ответ 3

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

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

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

fieldNameElement.textContent = "New text";

Ответ 4


function showPanel(fieldName) {
  var fieldNameElement = document.getElementById("field_name");
  while(fieldNameElement.childNodes.length >= 1) {
    fieldNameElement.removeChild(fieldNameElement.firstChild);
  }
  fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

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

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

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


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

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

Ответ 5

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

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

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

Ответ 6

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

в 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 в raw.

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

http://docs.jquery.com/Manipulation

Делает это так просто: $ ( "# field-name" ). text ( "Some new text." );

Ответ 11

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

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

Ответ 12

Здесь легко jQuery способ:

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

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