Getting Web Page To Show Dynamically Added HTML Text
Mavi Gozler
I am trying to use an old function that I have used with some success in the
past for parsing HTML (string) text in order to build a tree of DOM elements on
documentFragment node and then append that to existing rendered page.
Firebug's HTML tab is showing that the DOM tree of elements/attributes were
created properly, and that the documentFragment node was "transferred" (appended
to an existing element node in the document).
But the page is not being rendered as it should. Text appears without any
formatting; text contained in an element is not indicating that it is part of an
element.
It seems I recall having this problem years ago, but can't recall what the
solution was.
To see what is happening, go here:
http://proteomics.dynalias.org/interactivepages/Chemistry%20Calculator.html
============
Verbose Notes for those who need them:
* this "old function" was created for parsing HTML and adding dynamic page
elements using DOM methods because innerHTML property assignments are/were not
standardized way back when
* Javascript functions (DOM methods) insert the dynamically added HTML on to two
DIV elements, one DIV with id="main-menu" (added as UL item) and the other in
DIV with id="content-panels", where large chunks of HTML meat (sic) are hung on
that DIV.
* this document ("Chemistry Calculator") was probably made a decade ago, and was
basically one HTML page with lots of internal and external javascript. It is
being re-worked to be "modular": that is, a particular scientific module will
have a document with HTML markup and an external JS file containing its code.
This revisioning toward modularity is designed to make developer maintenance
easier, which was harder with a massive document even well commented/annotated.
The HTML markup is retrieved using AJAX, parsed and then inserted into the
middle of the base page. The retrieved markup is not an independent validated
HTML markup document; it only must exist as valid markup fragment to build a DOM
tree. Switching modules does not involve de-branching the DOM tree, but setting
'display:none' for the div element that contains it. All external JS files are
currently loaded with base page loading, but in the future might be retrieved by
AJAX and the code parsed and added to the existing library of executable code.
* Much of the code involved is in the following JS files:
+ ModuleController.js: involved with "registering a module": retrieving
the HTML markup by AJAX and noting which js file holds its code
+ UtilFuncs.js: pre-processes HTML markup that contains document.write() calls
inside script elements, and parses script element content
+ dom1.js: contains a lot of support for manipulating DOM, but most important
function is to parse HTML markup and build a tree on a document fragment node
Sebo
But the page is not being rendered as it should. Text appears without any
formatting; text contained in an element is not indicating that it is part of an
element.
If you can provide step by step instructions what to do and an exact description of what you see and what you would expect to see I can probably help you.
Sebastian
Mavi Gozler
The problem was related to using document.createElementNS() when I
should have been using document.createElement() for parsing HTML
markup. It was that simple.
My HTML parsing function handles stylesheets (internal or STYLE
elments, or external or LINK elements) differently, and it also
handles SCRIPT elements differently, of course. The attribute values
of inline event handlers are passed to a Function constructor. In
general, DOM node styling is done with properties under the style
property, and not by using setAttribute() calls. I keep all my
functions for parsing of markup strings in files I have named dom1.js
and css.js.