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

StackOverflow https://stackoverflow.com/questions/121817

  •  02-07-2019
  •  | 
  •  

Вопрос

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

<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 метод, который поддерживает простой текст, фрагмент HTML или любой объект JavaScript, определяющий toString метод.

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

Другие советы

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

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, поэтому этот метод переносим на другие языки и не полагается на нестандартный внутренний HTML.
  2. fieldName может содержать HTML, что может быть попыткой XSS-атаки.Если мы знаем, что это просто текст, нам следует создать текстовый узел вместо того, чтобы браузер анализировал его на предмет HTML.

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


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

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

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

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

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

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

в ИЕ: -

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

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

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

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, если вы не можете предположить структуру - используйте данные текста#для обновления существующего текстаТест производительности

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"));
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top