Як замінити текст усередині елемента div?

Мені потрібно динамічно встановити текст всередині елемента 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метод Prototype, який підтримує звичайний текст, фрагмент 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, тому техніка є портативною для інших мов, і не покладається на нестандартний внутрішній HTMLML
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функції прототипу - ще одне хороше рішення.

Швидка відповідь полягає у використанні innerHTML (або методі оновлення прототипу, який майже те саме). Проблема з InternalHTML полягає в тому, що вам потрібно уникати призначеного контенту. Залежно від цілей, вам потрібно буде це зробити з іншим кодом АБО

в 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

Робить це таким же простим, як: $ ("# ім'я поля"). Текст ("Якийсь новий текст.");

Використовуйте innerText, якщо ви не можете прийняти структуру. Використовуйте дані Text # для оновлення існуючого тексту Тест продуктивності

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