Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 9373

May 24th, 2009

Parsing an HTML String

Expand Post »

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:

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.

Similar Threads

File parsing in 'C' in C
Parsing html form. in PHP
Reading integers in a string in Java
Traversing a text file into string, int, and special symbols in Java
Parsing HTML in VB.NET in VB.NET

itsjareds

Reputation Points: 39

Solved Threads: 13

Junior Poster

Offline

103 posts
since May 2009

Permalink

May 24th, 2009

Re: Parsing an HTML String

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

Modifying your code all little bit:

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;
}

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

May 24th, 2009

Re: Parsing an HTML String

Hi itsjareds,

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

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.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

May 24th, 2009

Re: Parsing an HTML String

Hi essential,

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

Luckychap

Reputation Points: 83

Solved Threads: 61

Posting Pro in Training

Offline

442 posts
since Aug 2006

Permalink

May 24th, 2009

Re: Parsing an HTML String

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.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

May 24th, 2009

Re: Parsing an HTML String

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.

itsjareds

Reputation Points: 39

Solved Threads: 13

Junior Poster

Offline

103 posts
since May 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Image Preloader Script - Lite Version

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to display the details in right frame?

DaniWeb Message

Cancel Changes

User Name
Password