Member Avatar for itsjareds

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:

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 ?

  • 3 Contributors
  • 5 Replies
  • 4K Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by itsjareds

Recommended Answers

All 5 Replies

Member Avatar for Luckychap

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

Modifying your code all little bit:

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;
}
commented: Thanks for the help +1
Member Avatar for essential

Hi itsjareds,

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

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

Member Avatar for Luckychap

Hi essential,

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

Member Avatar for essential

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

Member Avatar for itsjareds

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.