JavaScript error on document.innerHTML

Question

I am not sure why, but the following stops my JavaScript from working.

I know it is not best practice to do this, But I have no idea where it is breaking.

JavaScript:

function loadmore(id) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var content;
            var x = JSON.parse(xmlhttp.responseText);
            alert('' + x.length);
            for (i = 0; i < x.length; i++) {
                document.getElementById("content").innerHTML += '<div class="col-lg-4 col-md-4 col-sm-4">';
                document.getElementById("content").innerHTML += '<div class="thumbnail">'
                document.getElementById("content").innerHTML += '<img src="' + x[i].main_image + '" alt="' + x[i].title + '" style="width:300px !important; height:150px; overflow:none;">';
                document.getElementById("content").innerHTML += '<div class="caption">';
                document.getElementById("content").innerHTML += '<h3>' + x[i].title + '</h3>';
                document.getElementById("content").innerHTML += '<p>' + x[i].content;
                document.getElementById("content").innerHTML += '</p>';
                document.getElementById("content").innerHTML += '<p><a href="//russellharrower.com/' + x[i].url + '" class="btn btn-default" role="button">Read More</a></p>'
                document.getElementById("content").innerHTML += '</div>';
                document.getElementById("content").innerHTML += '</div>';
                document.getElementById("content").innerHTML += '</div>';


                id = x._id;
                //document.getElementById("content").innerHTML+=content;

            }
        }
    }


    //xmlhttp.responseText
    xmlhttp.open("GET", "search/json&qid=" + id, true);
    xmlhttp.send();

}

Not really an answer but you should take a look at why innerHTML should be avoided. More related to the question: Which errors are appearing in your developer tools? And by the way, this would probably be much easier for you if you'd be using jQuery, like you tagged the question as additionally to raw javascript. — Jonast92
– Jonast92, Commented Dec 4, 2014 at 13:19
can you post your json? Please do something like that; console.log(x) — Manu Zi
– Manu Zi, Commented Dec 4, 2014 at 13:25

Community · Accepted Answer · 2020-06-20 09:12:55Z

As a general rule, the correct order of operations is:

new XMLHttpRequest
.open()
.onreadystatechange =
.send()

In some browsers, especially those that allow re-using the same object for multiple requests, calling .open() will clear your .onreadystatechange handler.

As an additional note, please DO NOT mix .innerHTML and +=. Here's how the browser sees it:

document.getElementById("content").innerHTML += '<div class="col-lg-4 col-md-4 col-sm-4">';
Oh, there's a missing end tag, better add that in. </div> added automatically.
document.getElementById("content").innerHTML += '<div class="thumbnail">'
Oh, there's a missing end tag, better add that in. </div> added automatically.
document.getElementById("content").innerHTML += '<img src="' + x[i].main_image + '" alt="' + x[i].title + '" style="width:300px !important; height:150px; overflow:none;">';
Okay, added an image. Note that we are not inside the <div><div> you expect!
document.getElementById("content").innerHTML += '<div class="caption">';
Oh, there's a missing end tag, better add that in. </div> added automatically.
document.getElementById("content").innerHTML += '<h3>' + x[i].title + '</h3>';
Okay, added the <h3>. Still not in the <div><div><div> you think!
document.getElementById("content").innerHTML += '<p>' + x[i].content;
Missing </p> tag, need to add that in.
document.getElementById("content").innerHTML += '</p>';
There was no <p> here... better add one to make this </p> valid. Empty paragraph added.
document.getElementById("content").innerHTML += '<p><a href="//russellharrower.com/' + x[i].url + '" class="btn btn-default" role="button">Read More</a></p>'
Okay, paragraph with link added.
document.getElementById("content").innerHTML += '</div>';
Ah! I didn't have an open <div>! Better add one. Empty <div> added. (repeat x3)

Can you see how this step-by-step approach is leading to issues because it keeps on thinking that you're done and correcting your "bad" HTML accordingly?

bob-fornal · Accepted Answer · 2014-12-04 13:21:14Z

1

There are several minor changes that can be made to simplify this. Try ...

var content = document.getElementById("content");
var build_html = [
  "<div>",
  "Content Here",
  "</div>"
  ].join("\n");
content.innerHTML = build_html;

Obviously, your HTML content is more robust than what I have here, but with this you aren't slamming the DOM over and over.

answered Dec 4, 2014 at 13:21

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

3 Comments

Niet the Dark Absol Over a year ago

In short, innerHTML and += do not mix.

bob-fornal Over a year ago

I would certainly agree with that ... I'm not 100% sure they don't mix technically, but it is definitely a bad practice at best.

Quentin Over a year ago

They do not mix technically. Every time you read from innerHTML it serialises the DOM to HTML. So you cannot write partial elements as the code in the question is trying to do.

Collectives™ on Stack Overflow

JavaScript error on document.innerHTML

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related