Question

I am using this code trying to add new content before another element:

 var form = document.getElementsByClassName('commentresponse')[0],
     newcomment = '<div><span></span><span><p class="author">'+author+'</p><p class="content">'+comment+'</p></span></div>' ;
 form.insertBefore(newcomment, form);

The 2 vars work fine and return what I expect. However Chrome gives me this error: Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Somehow the insertBefore line blocks the code. What am I doing wrong?

Thanks for your help guys!

Answer 1

insertBefore takes a DOM node, not HTML.

Do this instead:

var form = document.getElementsByClassName('commentresponse')[0],
    newcomment = document.createElement('div');
newcomment.innerHTML = '<span></span><span><p class="author">'+author+'</p><p class="content">'+comment+'</p></span>';
form.parentNode.insertBefore(newcomment, form);

You will want to escape author and comment, as strings which contain '<', '>', and '&' will mess it up.

For completeness, here’s how you could do it completely with DOM nodes (without using innerHTML — although doing such things seems to be a lost art on the modern web):

var form = document.getElementsByClassName('commentresponse')[0],
    newcomment = document.createElement('div'),
    el, el2;
newcomment.appendChild(document.creatElement('span'));
el = document.createElement('span');
el2 = document.createElement('p');
el2.className = 'author';
el2.appendChild(document.createTextNode(author));
el.appendChild(el2);
el2 = document.createElement('p');
el2.className = 'content';
el2.appendChild(document.createTextNode(content));
el.appendChild(el2);
newcomment.appendChild(el);
form.parentNode.insertBefore(el, form);

This way doesn’t need to be escaped, since author and content are explicitly added as text nodes.