201

I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.

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

Here's what the function will look like:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}
2
  • Does the accepted answer do what you want it to when assigned text like is:- <span style="font-size:36pt">This is big</span>. If this behaviour is desirable then can you re-phrase the question to match? Commented Sep 23, 2008 at 16:13
  • Could this be used in a XSS injection attack? Commented May 4, 2012 at 11:15

13 Answers 13

283

You can simply use:

fieldNameElement.innerHTML = "My new text!";
5
  • 2
    Shouldn't single quotes be used for 'static' text? Commented Sep 23, 2008 at 15:45
  • 7
    In PHP, yes. In JavaScript, I don't believe it matters.
    – ceejayoz
    Commented Sep 23, 2008 at 15:45
  • 52
    In Javascript, single and double quotes are interchangeable.
    – 17 of 26
    Commented Sep 23, 2008 at 15:49
  • 21
    bad advice, because the text may contain HTML-markup-like content by accident Commented Sep 11, 2014 at 17:34
  • 12
    element.innerHTML = "<script>doSomethingMalicious()</script>";won't be a good idea. element.innerHTML = "& neither will this"; Commented Sep 15, 2016 at 22:21
227

Updated for everyone reading this in 2013 and later:

This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box.

To replace text inside a div element, use .textContent(), a standard method is provided in all current browsers.

fieldNameElement.textContent = "New text";
3
  • 10
    @Legolas Hence writing 'current browser' two years ago. Commented May 7, 2015 at 15:25
  • 2
    Thank you! I was trying the other answers, wondering why 'innerHTML' wasn't working.
    – GreySage
    Commented Feb 6, 2017 at 18:06
  • 4
    You might consider elaborating on why textContent is a superior method to innerHTML: it's faster, safer, and more appropriate when not deliberately trying to insert HTML markup. Commented Apr 16, 2019 at 0:00
79

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

The advantages of doing it this way:

  1. It only uses the DOM, so the technique is portable to other languages, and doesn't rely on the non-standard innerHTML
  2. fieldName might contain HTML, which could be an attempted XSS attack. If we know it's just text, we should be creating a text node, instead of having the browser parse it for HTML

If I were going to use a javascript library, I'd use jQuery, and do this:


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

Note that @AnthonyWJones' comment is correct: "field_name" isn't a particularly descriptive id or variable name.

6
  • Which other languages could you port this technique to? Commented Sep 23, 2008 at 15:54
  • Any language with a DOM implementation supports this (and most languages have a DOM implementation).
    – Quentin
    Commented Sep 23, 2008 at 16:01
  • This is good answer, better than mine and is the correct answer. You might consider tidying the example though. 'fieldname' is not a good name for the function's parameter. In fact it might be best to take two one for the element ID and another for the content, i.e.; elemID, content Commented Sep 23, 2008 at 16:07
  • I borrowed fieldName and the ID from the question itself. Commented Sep 23, 2008 at 17:00
  • The question probably used field_name to make the example generic. Also the questioner mentions that Prototype is available but not jQuery. Commented Sep 23, 2008 at 17:13
52

I would use Prototype's update method which supports plain text, an HTML snippet or any JavaScript object that defines a toString method.

$("field_name").update("New text");
4
  • 28
    @Aeyoun The OP implied they were already using Prototype, so if that's the case it makes sense to take advantage of it. Commented Apr 8, 2013 at 7:35
  • 6
    Why to me only works with $("field_name").text("new text");
    – Drako
    Commented Dec 15, 2015 at 14:17
  • @Drako Are you using PrototypeJS? Commented Dec 15, 2015 at 15:22
  • 11
    @Drako The original question and my answer from seven years ago are for PrototypeJS not jQuery. Commented Dec 16, 2015 at 10:00
18
$('field_name').innerHTML = 'Your text.';

One of the nifty features of Prototype is that $('field_name') does the same thing as document.getElementById('field_name'). Use it! :-)

John Topley's answer using Prototype's update function is another good solution.

6
  • 5
    That doesn't look like JavaScript? Commented Sep 23, 2008 at 15:42
  • 1
    Don't use innerHTML. It's not a w3c recommendation and behaves inconsistently. It's considered bad style.
    – Tom
    Commented Sep 23, 2008 at 15:54
  • Tom, what should be used instead (if you don't use Prototype)? Commented Sep 23, 2008 at 16:19
  • 1
    Milan, the more accepted way is to loop through the childNodes, call removeNode(true) on each, then append new nodes created using document.createElement() or document.createTextNode(). If you need to do that I would recommend writing a function to avoid a lot of typing.
    – Joel Anair
    Commented Sep 24, 2008 at 15:13
  • 3
    @RaduSimionescu No, it isn't. This question and answer is about Prototype.js, not jQuery. In Prototype $ looks up an item by ID. It's not selector-based like jQuery is. api.prototypejs.org/dom/dollar
    – ceejayoz
    Commented Oct 15, 2012 at 2:11
18

The quick answer is to use innerHTML (or prototype's update method which pretty much the same thing). The problem with innerHTML is you need to escape the content being assigned. Depending on your targets you will need to do that with other code OR

in IE:-

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

in FF:-

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

(Actually of FF have the following present in by code)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

Now I can just use innerText if you need widest possible browser support then this is not a complete solution but neither is using innerHTML in the raw.

0
7

If you really want us to just continue where you left off, you could do:

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

nodeValue is also a standard DOM property you can use:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}
4
el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
2

If you're inclined to start using a lot of JavaScript on your site, jQuery makes playing with the DOM extremely simple.

http://docs.jquery.com/Manipulation

Makes it as simple as: $("#field-name").text("Some new text.");

1
  • Prototype has similar utility functions.
    – ceejayoz
    Commented Sep 23, 2008 at 15:54
2

Use innerText if you can't assume structure - Use Text#data to update existing text Performance Test

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

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}
1
  • Better to replace the node then to remove it and add a new one as two separate operations.
    – Quentin
    Commented Sep 23, 2008 at 16:01
0

Here's an easy jQuery way:

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

el.html(el.html().replace(/Old Text/ig, "New Text"));
2
  • This seems like a bad idea - what if your element contained subnodes with the same text, or your text matched part of an element tag name? WHy not just use .text? Commented May 4, 2012 at 11:13
  • I completely agree with James Westgate, should not do that.
    – TGarrett
    Commented Oct 8, 2015 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.