Как заменить текст внутри элемента 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");

Ответ 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"));