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

	document.body.innerHTML = root.innerHTML;

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

9 Years
Discussion Span
Last Post by itsjareds

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	
	document.body.innerHTML = root.innerHTML;
Votes + Comments
Thanks for the help

Hi itsjareds,

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

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


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


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


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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.