AJAX

Parsing an HTML String

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2009

Posts: 97

Reputation: itsjareds is an unknown quantity at this point

Solved Threads: 12

itsjareds

Offline

Junior Poster in Training

Parsing an HTML String

May 24th, 2009

Hi,

I need to parse an HTML string received from an AJAX request. I wrote a function that places the HTML string into an unappended (not added) <div> , which opens the string up to the DOM hierarchy. However, when I try to access the elements of this <div> , I get an error in the console that says root.getElementById is not a function. This tells me that I can't access any of the child nodes.

Can anyone help? Here is what my script looks like:

 Help with Code Tags 
 JavaScript Syntax (Toggle Plain Text) 
function parseHTML(html) {
	var root = document.createElement("div");
	root.innerHTML = html;
 
	// The error console stops at this line
	if (root.getElementById("head")) {
		// Parsing head...
		// Functions removed (unnecessary to post)
 
		// Parsing finished, remove tag
		root.removeChild(head);
	}
 
	document.body.innerHTML = root.innerHTML;
}
function parseHTML(html) {
	var root = document.createElement("div");
	root.innerHTML = html;

	// The error console stops at this line
	if (root.getElementById("head")) {
		// Parsing head...
		// Functions removed (unnecessary to post)

		// Parsing finished, remove tag
		root.removeChild(head);
	}

	document.body.innerHTML = root.innerHTML;
}

Does anybody know why I can't access DOM functions with root ?

Last edited by itsjareds; May 24th, 2009 at 1:53 am.

Mark your post as Solved if you've been helped!

I learn by helping others learn.
If you find one of my posts helpful, don't be afraid to give me a reputation bump :D

•

Join Date: Aug 2006

Posts: 319

Reputation: Luckychap is on a distinguished road

Solved Threads: 42

Luckychap

Offline

Posting Whiz

Re: Parsing an HTML String

May 24th, 2009

getElementById() only works with document. To parse your HTML can use childNodes;

Modifying your code all little bit:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
function parseHTML(html) {
	var root = document.createElement("div");
	root.innerHTML = html;
 
        // Get all child nodes of root div
        var allChilds = root.childNodes;
        // Loop through all the child nodes and check for id = 'head'
	for(var i = 0; i < allChilds.length; i++) {
            // if id == 'head', you get your element
	    if (allChilds[i].id && allChilds[i].id == "head") {
	        // Remove it from root	
		root.removeChild(allChilds[i]);
            }
	}
	document.body.innerHTML = root.innerHTML;
}
function parseHTML(html) {
	var root = document.createElement("div");
	root.innerHTML = html;
        
        // Get all child nodes of root div
        var allChilds = root.childNodes;
        // Loop through all the child nodes and check for id = 'head'
	for(var i = 0; i < allChilds.length; i++) {
            // if id == 'head', you get your element
	    if (allChilds[i].id && allChilds[i].id == "head") {
	        // Remove it from root	
		root.removeChild(allChilds[i]);
            }
	}
	document.body.innerHTML = root.innerHTML;
}

When you think you have done a lot, then be ready for YOUR downfall.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Parsing an HTML String

May 24th, 2009

Hi itsjareds,

You can expand this function to be able to work with your needs.

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<!--
var parseHTML;
var root;
var head;
var body;
var AJAXdummy;
 
parseHTML = function( html ) { 
    head = document.getElementsByTagName("head");
    body = document.getElementsByTagName("body")[0];
   root = document.createElement("div");
   root.id = "newDiv";
   if ( root ) {
 
   body.appendChild( root ); // Append Div element inside the body first.
 
   body.removeChild( head[1] ); // Removing Second Header element inside the appended div.
 
   root.innerHTML = html; // Injecting Contents from Ajax Request.
   }
};
 
window.onload = function( ) { 
   AJAXdummy =  "<html><head><title>Test Parsing HTML</title></head>";
   AJAXdummy += "<body><h1>Hello Universe!</h1></body></html>";
   parseHTML( AJAXdummy );
};
//-->
</script>
</head>
<body>
 
</body>
</html>
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<!--
var parseHTML;
var root;
var head;
var body;
var AJAXdummy;

parseHTML = function( html ) { 
    head = document.getElementsByTagName("head");
    body = document.getElementsByTagName("body")[0];
   root = document.createElement("div");
   root.id = "newDiv";
   if ( root ) {

   body.appendChild( root ); // Append Div element inside the body first.

   body.removeChild( head[1] ); // Removing Second Header element inside the appended div.

   root.innerHTML = html; // Injecting Contents from Ajax Request.
   }
};

window.onload = function( ) { 
   AJAXdummy =  "<html><head><title>Test Parsing HTML</title></head>";
   AJAXdummy += "<body><h1>Hello Universe!</h1></body></html>";
   parseHTML( AJAXdummy );
};
//-->
</script>
</head>
<body>

</body>
</html>

The script was based on your provided function's and non-standard. Lite modification is required to obtained its maximum performance.

But i hope we've both claimed your needs...

Last edited by essential; May 24th, 2009 at 3:49 am.

•

Join Date: Aug 2006

Posts: 319

Reputation: Luckychap is on a distinguished road

Solved Threads: 42

Luckychap

Offline

Posting Whiz

Re: Parsing an HTML String

May 24th, 2009

Hi essential,

I think he do not want root to be appended to body.

When you think you have done a lot, then be ready for YOUR downfall.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Parsing an HTML String

May 24th, 2009

Hi lucky,

I've make it just to run the entire function for testing. itsjareds is an experienced guy when it comes to javascript, im sure he can handle everything from there!

Anyways thanks for reminding me -
And good day to you...

Last edited by essential; May 24th, 2009 at 3:58 am.

•

Join Date: May 2009

Posts: 97

Reputation: itsjareds is an unknown quantity at this point

Solved Threads: 12

itsjareds

Offline

Junior Poster in Training

Re: Parsing an HTML String

May 24th, 2009

Thanks for the help - all good answers. If I was not already working on the script, I would have used your first suggestion, LuckyChap, but I found that making a new tag called <header> and searching for it with getElementsByTagName also worked.

Your way seems probably more correct, as creating a <header> tag is XML-like, but at least I know that none of my pages will have duplicate issues with two divs with an id of header .

Here's the demo page if you're interested. It works correctly, and now I'm off to add RealSimpleHistory to allow back button support.

Last edited by itsjareds; May 24th, 2009 at 12:54 pm.

Mark your post as Solved if you've been helped!

I learn by helping others learn.
If you find one of my posts helpful, don't be afraid to give me a reputation bump :D