ansaurus

Question

Answer 1

+5 A:

The better way of doing it is to use document.createTextNode. One of the main reasons for using this function instead of innerHTML is that all HTML character escaping will be taken care of for you whereas you would have to escape your string yourself if you were simply setting innerHTML.

Andrew Hare 2009-04-05 00:17:49

However, it seems that innerHTML is much faster than the W3C DOM methods: http://www.quirksmode.org/dom/innerhtml.html.

Steve Harrison 2009-04-05 00:58:10

It depends what you're doing; it's misleading to say one method is blanket better. DOM tends to slow when doing childNode list operations on lots of elements (tending to O(n²)), where innerHTML can do them all at once. But innerHTML's parsing/serialisation step can make other operations slower.

bobince 2009-04-05 01:53:35

Answer 2

+9 A:

The recommended way is through DOM manipulation, but it can be quite verbose. For example:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

EDIT

In response to your edit, in order to replace the current content, you simply remove the existing content, then use the code above to fill in new content. For example:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

But as someone else said, I'd recommend using something like jQuery instead, as not all browsers fully support DOM, and those that do have quirks which are dealt with internally by JavaScript libraries. For example, jQuery looks something like this:

$('#someID').html("<p>Hello, <b>World</b>!</p>");

Turnor 2009-04-05 00:20:32

so actually, first place new text and then remove old... that seems a very lenghty way to do things... I wonder why the W3C does not approve of innerHTML

WebDevHobo 2009-04-06 19:44:09

Other way around :)Their view is that with innerHTML, it's possible to insert invalid markup into an XML/XHTML document. Though that said, they seem to have changed their minds with HTML5.

Turnor 2009-04-06 20:21:15

@Turnor: jQuery uses innerHTML many times inside code, therfor suggesting to use jQuery in order avoid using innerHTML does not make much sense IMHO.

Marco Demajo 2010-10-14 12:13:08

Answer 3

+1 A:

You could use DOM as follows:

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

But I think anyone rarely do this but use a framework like jQuery or Prototype or any other javascript framework out there instead. This is jquery example:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>

Sergej Andrejev 2009-04-05 00:23:32

Answer 4

+2 A:

You can get the same effect by manipulating the DOM. The safest way to change text is to remove all the child nodes of the element and replace them with a new text node.

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

Removing the child nodes gets rid of the text content of your element before replacing it with the new text.

The reason most developers avoid using innerHTML is that accessing elements through the DOM is standards compliant.

Bill the Lizard 2009-04-05 03:30:00

Answer 5

+2 A:

If you only want to change plain text, then there's a quicker solution that relies on standards:

document.getElementById("one").firstChild.data = "two";

Anyway, please note that innerHTML is going to be part of the upcoming HTML 5 standard.

Ionuț G. Stan 2009-04-05 17:25:43

Answer 6

A:

var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

This may be as objectionable as innerHTML to you, but it has the advantage of working in some cases (IE) where innerHTML or appendChild do not, like some table nodes, the text of style and script elements and the value of form fields

kennebec 2009-04-06 14:08:04

Answer 7

A:

It appears to me that the CSS+HTML+JS combination should achieve desired effects:

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

Does anyone know if this works in practice?

ilya n. 2009-06-16 10:02:48

ansaurus

tags:

views:

answers:

Alternative for innerHTML?

related questions