How do I replace text inside a div element

Question

I need to set the text within a DIV element dynamically  What is the best  browser safe approach  I have prototypejs and scriptaculous available    lt div id  panel  gt     lt div id  field name  gt TEXT GOES HERE lt  div gt   lt  div gt    Here s what the function will look like   function showPanel fieldName      var fieldNameElement   document getElementById  field name        Make replacement here

User · Accepted Answer

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       Element update documentation

User · Answer

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 Node textContent  which is provided in all current browsers   fieldNameElement textContent    New text

User · Answer

function showPanel fieldName      var fieldNameElement   document getElementById field name      fieldNameElement removeChild fieldNameElement firstChild     var newText   document createTextNode  New Text      fieldNameElement appendChild newText

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In HTML put this   lt div id  field name  gt TEXT GOES HERE lt  div gt    In Javascript put this  var fieldNameElement   document getElementById  field name            if  fieldNameElement           fieldNameElement innerHTML    some HTML

User · Answer

el innerHTML     el appendChild document createTextNode  yo

User · Answer

You can simply use   fieldNameElement innerHTML    My new text

User · Answer

Here s an easy jQuery way   var el       yourid  yourclass     el html el html   replace  Old Text ig   New Text

User · Answer

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    It only uses the DOM  so the technique is portable to other languages  and doesn t rely on the non-standard innerHTML 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

User · Answer

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

User · Answer

If you really want us to just continue where you left off  you could do   if  fieldNameElement      fieldNameElement innerHTML    some HTML

[javascript] How do I replace text inside a div element?

Examples related to javascript

Examples related to html

Examples related to dom