Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Access full page source after changes applied

with DOM scripting



5:09 pm on Nov 21, 2006 (gmt 0)

10+ Year Member

I need to add a span to all text nodes in an html document, and found a basic solution that's included below.

This works fine and it will display the page on the fly with the spans functioning, but the problem is that I need to somehow output all of the source html with the actual span tags included.

Is there any way with DOM scripting that I can access/output the full source with the changes were made dynamically (and don't show on the actual html source)?

I need to get it into a variable or in some other way, but I don't know if this is even possible...

.js { color: white; background-color: orange; font-weight: bold; }
function spanAllTextNodes (styleClass, element) {
if (!element)
element = document.body;
for (var c = 0; c < element.childNodes.length; c++)
if (element.childNodes[c].nodeType == 3) {
var span = document.createElement('SPAN');
span.className = styleClass;
var textNode = element.replaceChild(span, element.childNodes[c]);
spanAllTextNodes(styleClass, element.childNodes[c]);
<BODY ONLOAD="spanAllTextNodes('js');">
<A HREF="here">
Some Text
More Text
More Text


6:11 pm on Nov 21, 2006 (gmt 0)

10+ Year Member

I poked around with the Firefox DOM Inspector, and now see that I can access the contents of the page body with:


and that shows the body HTML with the span tags as dynamically placed by the javascript...


Featured Threads

Hot Threads This Week

Hot Threads This Month