2

I wanted to ask how to change div content, but not using innerhtml.

user113716
  • 318,772
  • 63
  • 451
  • 440
Kedor
  • 1,488
  • 5
  • 29
  • 53
  • 2
    Why not using innerHTML? – GolezTrol Oct 19 '11 at 13:41
  • 1
    DOM manipulation methods: http://www.quirksmode.org/dom/w3c_core.html#nodemanipulation – Felix Kling Oct 19 '11 at 13:48
  • 2
    @GolezTrol Because it is not standard. It is the *wrong* way to do things, from a forward-looking point of view. It treats the DOM as a string, when it's not. It wholesale murders any events that were on those elements. – Ryan Kinal Oct 19 '11 at 13:53
  • 3
    @Ryan Kinal the "innerHTML" mechanism is standardized with HTML5. – Pointy Oct 19 '11 at 14:06
  • @Pointy has a point. However, the final items in my previous comment are still valid. – Ryan Kinal Oct 19 '11 at 14:11
  • Granted, it was merely [a widely-implemented proprietary feature](http://dev.w3.org/html5/html4-differences/Overview.html#htmldocument-extensions) at one point, but `innerHTML` was included in the HTML5 standard [as far back as 2008](http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#dynamic2), and [remains there to this day](http://www.whatwg.org/specs/web-apps/current-work/multipage/apis-in-html-documents.html#dom-innerhtml). Why not use it if you don't have events defined on the descendents of an element? – Jordan Gray Oct 19 '11 at 14:22
  • 1
    @RyanKinal "It is the wrong way to do things, from a forward-looking point of view." I think this depends on the particular context in which it is being used. "It treats the DOM as a string, when it's not." The HTML document itself is represented as a string, until it is parsed; why not allow HTML fragments to be represented as strings to be parsed? – Jordan Gray Oct 19 '11 at 14:30
  • 2
    Admittedly, there are times when using `innerHTML` is *not* the devil's work. However, you should *always always* ask yourself if it's the right tool for the job. There have been *so many times* where I was forced into changing `.innerHTML` to DOM manipulations due to problems with events and ever-increasing granularity of changes. It is *simply more extensible* to use DOM methods. – Ryan Kinal Oct 19 '11 at 14:50

4 Answers4

5

DEMO: http://jsfiddle.net/Cb6ME/

   // get the div
var div = document.getElementById('foo');

   // remove child nodes while at least one exists
while( div.childNodes[0] ) {
    div.removeChild( div.childNodes[0] );
}
   // create a new span element
var span = document.createElement( 'span' );

   // give it some text content
span.appendChild( document.createTextNode("I'm new!!!") );

   // append the span to the original div
div.appendChild( span );
user113716
  • 318,772
  • 63
  • 451
  • 440
3

You can use nodeValue to access the value of a node, however the value of a div. In your example you might have the following HTML...

<div id="myLovelyDiv">This is the text that you want to change</div>

and this script...

var myDiv = getElementById("myLovelyDiv");
myDiv.childNodes[0].nodeValue = "The text has been changed.";

but I fail to see why you wouldn't use

myDiv.innerHTML = "The text has been changed properly.";
mjaggard
  • 2,389
  • 1
  • 23
  • 45
  • 2
    I'm not downvoting because you only have 1 rep, but if you had more, I would have. We (the JavaScript community) needs to stop using innerHTML. – Incognito Oct 19 '11 at 13:50
  • 1
    @Incognito Why? `innerHTML` is often faster than use of DOM Core attributes and methods. It's also well supported and with HTML5 no more proprietary. – duri Oct 19 '11 at 13:53
  • @duri Faster? ... Are... are you trolling me? – Incognito Oct 19 '11 at 13:56
  • @Incognito http://www.quirksmode.org/dom/innerhtml.html The test is somewhat outdated, but the resolution *The most obvious conclusion of these tests is that innerHTML is faster than "real" W3C DOM methods in all browsers.* is still valid. – duri Oct 19 '11 at 13:58
  • The only thing that I'd note based on the comments above is that you should really use some sort of library. YUI, JQuery, Dojo, anything - they tend to push you down the best route in how to change your page. I think that in answering the basic question I was right though, innerHTML is the easiest way. – mjaggard Oct 19 '11 at 14:06
  • 3
    @duri those tests are too old, any sensible modern browser is faster with DOM methods then innerHTML. Besides browsers optimize what we use, so if we use the DOM the DOM will get faster. And remember we dont want to use innerHTML for obvouis reasons. – Raynos Oct 19 '11 at 14:07
  • @mjaggard Open up the source code of jQuery and see for yourself, it tends to lead you down a lot of performance killers. – Incognito Oct 19 '11 at 14:11
  • @duri Those tests are *really* old. Look at the perf that f0x posted. I ran tests on ie6-9, chrome, and FF won't run as it crashes when it reaches innerHTML ( sadtrombone.wav ) – Incognito Oct 19 '11 at 14:15
  • @mjaggard the whole HTML is a string format used to send data across the wire. The only thing you care about in a browser is the state of the DOM. you really should not be telling the DOM to parse more HTML after the document is loaded. – Raynos Oct 20 '11 at 09:41
  • @Raynos - Across the wire?! Who said anything about that? I don't think it's reasonable to assume that this person was using AJAX to retrieve data which would be dumped into the DOM like that. Why don't you want the DOM to parse more HTML - that's what it's made to do! – mjaggard Oct 24 '11 at 22:35
2

A DIV element is a generic block level (by default) element in HTML used as a structural container to hold one or more block or inline elements.

Depending on what it is you want to change you can either select the sub-node in question directly, loop over the childNodes property to find the desired sub-node or completely rewrite the contents as html using innerHTML (which you stated you didn't want to do).

If you want to add content you can create a new element and use the appendChild(child) method of the DIV element to add to it's contents.

Is that what you were looking for?

JoshHetland
  • 1,273
  • 1
  • 12
  • 22
0

I know I'm late but .textContent can be replaced for .innerHTML (if you only want to change the text and not code HTML).

Kaleab B.
  • 1
  • 1