DOM: how to append to node'd contents?

[J Krugman]

This question refers to the DOM. I would like to dynamically append
some small amount of text to the all-text content of a <pre> node.
I suppose that I could extract the existing content, and replace
the <pre> node in question with a new <pre> node that has the
extended content. But the existing content is longish, and it
seems to me wasteful to rewrite it all just to have a small amount
of text tacked on to the end. Is there a way to simply append the
new text to the node's contents?

TIA,

jill

--
To s&e^n]d me m~a}i]l r%e*m?o\v[e bit from my a|d)d:r{e:s]s.

[Andrew Urquhart]

*J Krugman* wrote:

This question refers to the DOM. I would like to dynamically append
some small amount of text to the all-text content of a <pre> node.
I suppose that I could extract the existing content, and replace
the <pre> node in question with a new <pre> node that has the
extended content. But the existing content is longish, and it
seems to me wasteful to rewrite it all just to have a small amount
of text tacked on to the end. Is there a way to simply append the
new text to the node's contents?

Not sure why you can't append another text node to the pre element?
E.g.:

function AppendText(strId, strTxt) {
var objNode = document.getElementById(strId);
if (objNode) {
var objTextNode = document.createTextNode(strTxt);
objNode.appendChild(objTextNode);
}
}
<pre id="myNode" onclick="AppendText('myNode', 'It was\r\nthe fact'
+' that the cave was in the middle of Islington and there wasn\'t\r\n'
+'a bus due for two million years.')">Life, the Universe, and Everything
for Sally
Chapter 1
The regular early morning yell of horror was the sound of Arthur Dent
waking up and suddenly remembering where he was. It wasn't just that
the cave was cold, it wasn't just that it was damp and smelly. </pre>
--
Andrew Urquhart
- FAQ: www.jibbering.com/faq/
- Archive: www.google.com/groups?q=comp.lang.javascript
- Contact me: http://andrewu.co.uk/contact/

[DU]

J Krugman wrote:

This question refers to the DOM. I would like to dynamically append
some small amount of text to the all-text content of a <pre> node.
I suppose that I could extract the existing content, and replace
the <pre> node in question with a new <pre> node that has the
extended content. But the existing content is longish, and it
seems to me wasteful to rewrite it all just to have a small amount
of text tacked on to the end. Is there a way to simply append the
new text to the node's contents?

TIA,

jill

W3C DOM 2 CharacterData appendData() method is what you're looking for
here and appendData() is supported by almost all browsers (MSIE 5+ Mac
and Windows, NS 6+, Mozilla 1.x, Firefox 0.5+, Safari 1.x, K-meleon
0.7+, Opera 7.x, Galeon 1.x, Konqueror 3.x, etc.) and is a W3C web
standard method.

Assuming you have:

<pre id="idPre"> ... </pre>

then

document.getElementById("idPre").childNodes[0].appendData(" some
additional text");

will do the trick.
You can use other DOM 2 CharacterData methods like insertData() to have
more control.

DU

[J Krugman]

In <ce**********@news.eusc.inter.net> DU <dr*******@hotWIPETHISmail.com> writes:

J Krugman wrote:

This question refers to the DOM. I would like to dynamically append
some small amount of text to the all-text content of a <pre> node.
I suppose that I could extract the existing content, and replace
the <pre> node in question with a new <pre> node that has the
extended content. But the existing content is longish, and it
seems to me wasteful to rewrite it all just to have a small amount
of text tacked on to the end. Is there a way to simply append the
new text to the node's contents?

TIA,

jill

W3C DOM 2 CharacterData appendData() method is what you're looking for
here and appendData() is supported by almost all browsers (MSIE 5+ Mac
and Windows, NS 6+, Mozilla 1.x, Firefox 0.5+, Safari 1.x, K-meleon
0.7+, Opera 7.x, Galeon 1.x, Konqueror 3.x, etc.) and is a W3C web
standard method. Assuming you have: <pre id="idPre"> ... </pre> then document.getElementById("idPre").childNodes[0].appendData(" some
additional text"); will do the trick.
You can use other DOM 2 CharacterData methods like insertData() to have
more control.

Thank you. That was very helpful.

jill

--
To s&e^n]d me m~a}i]l r%e*m?o\v[e bit from my a|d)d:r{e:s]s.