Inserting DOM nodes in-place at script elements in XHTML documents

[SMH]

I am in the process of converting all HTML documents, including many
dynamic/interactive documents, to XHTML documents (because I want to
incorporate SVG and MathML, among other things).

I am having a problem converting

document.write( )

statements which are not allowed in XHTML documents to statements which
create the DOM nodes/elements dynamically within script elements.

Are there examples on the web or discussion in books about working with
XHTML?

I have a lot of books on Javascript and I think on DOM, but they don't seem
to talk about XHTML documents. I had to find out that document.write( ) was
not allowed from someone in a newsgroup, who directed me to the W3 FAQ on
this.

[Martin Honnen]

SMH wrote:

I am in the process of converting all HTML documents, including many
dynamic/interactive documents, to XHTML documents (because I want to
incorporate SVG and MathML, among other things).

I am having a problem converting

document.write( )

statements which are not allowed in XHTML documents to statements which
create the DOM nodes/elements dynamically within script elements.

Are there examples on the web or discussion in books about working with
XHTML?

As long as you serve your XHTML documents as text/html there is no
difference in scripting them compared to HTML documents.
And serving as application/xhtml+xml is not an option on the WWW in
general as long as IE does not render such documents.

On the other hand you say you want to use XHTML to incorporate SVG or
MathML so it sounds as if you indeed want to move to
application/xhtml+xml or application/xml. document.write does not work
but you can certainly use the W3C DOM Core methods to create and insert
nodes in your document. Assuming the browser does incremental parsing
and you want to insert nodes at the position where your script element
is in the document then you can use the following approach:
<script type="text/javascript">
var ns = 'http://www.w3.org/1999/xhtml';
var scripts = document.getEle mentsByTagNameN S(ns, 'script');
var lastScript = scripts[scripts.length - 1];

// now create content you want to insert e.g.
var p = document.create ElementNS(ns, 'p');
p.appendChild(d ocument.createT extNode('The quick ...'));
// and insert after the last/current script element
lastScript.pare ntNode.appendCh ild(p);
</script>
That should work with Firefox 3.0/2.0 and with Opera 9.
I don't think it works with Firefox 1 or 1.5. I have not tried with Safari.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[SMH]

Martin Honnen <ma*******@yaho o.dewrote in comp.lang.javas cript:

SMH wrote:

>I am in the process of converting all HTML documents, including many
dynamic/interactive documents, to XHTML documents (because I want to
incorporate SVG and MathML, among other things).

I am having a problem converting

document.write( )

statements which are not allowed in XHTML documents to statements
which create the DOM nodes/elements dynamically within script
elements.

Are there examples on the web or discussion in books about working
with XHTML?

As long as you serve your XHTML documents as text/html there is no
difference in scripting them compared to HTML documents.
And serving as application/xhtml+xml is not an option on the WWW in
general as long as IE does not render such documents.

On the other hand you say you want to use XHTML to incorporate SVG or
MathML so it sounds as if you indeed want to move to
application/xhtml+xml or application/xml. document.write does not work
but you can certainly use the W3C DOM Core methods to create and
insert nodes in your document. Assuming the browser does incremental
parsing and you want to insert nodes at the position where your script
element is in the document then you can use the following approach:
<script type="text/javascript">
var ns = 'http://www.w3.org/1999/xhtml';
var scripts = document.getEle mentsByTagNameN S(ns, 'script');
var lastScript = scripts[scripts.length - 1];

// now create content you want to insert e.g.
var p = document.create ElementNS(ns, 'p');
p.appendChild(d ocument.createT extNode('The quick ...'));
// and insert after the last/current script element
lastScript.pare ntNode.appendCh ild(p);
</script>

Thanks Martin.

This should be put into a book with a lot of the many gold nuggets you
have posted in this newsgroup.

I hope you develop a relationship with a publisher.

That should work with Firefox 3.0/2.0 and with Opera 9.
I don't think it works with Firefox 1 or 1.5. I have not tried with
Safari.