Question

My code:

function SubmitCommentAJAX(i)
{
    var thecomment = i.parentNode.getElementsByClassName("styled")[0].innerHTML; 
    var commentBox = document.body.getElementsByClassName("commentsScroll")[0];
    var request = "http://localhost:8080/ituned.com/index?Event=Comment&PostTitle=<%=p.getTitle()%>&PostOwner=<%=p.getUsername_of_Owner()%>&comment="+thecomment;

    xmlhttp.open("POST",request,true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {            
            var response=xmlhttp.responseXML.getElementsByTagName("theComment")[0].text;
            **commentBox.insertBefore(response, commentBox.firstChild);**
        }
    };
}

HTML:

<div class="commentsScroll" align="left"> 
    <div></div>             
    </div> 
</div>

I get error: NOT_FOUND_ERR: DOM Exception 8 for the line commentBox.insertBefore(response, commentBox.firstChild);

But commentBox is well defined because when I check with alert(commentBox) it shows me the object.

What is the mistake?

Answer 1

insertBefore takes a dom node so you’ll have to convert the text to a text node

var response=xmlhttp.responseXML.getElementsByTagName("theComment")[0].textContent;
commentBox.insertBefore(document.createTextNode(response), commentBox.firstChild);