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)

Full Member

10+ Year Member

joined:Jan 5, 2004
votes: 0

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)

Full Member

10+ Year Member

joined:Jan 5, 2004
votes: 0

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...


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members