inner.HTML not centering inside if functions

Question

Code Sample:

var msg = document.getElementById("message");

//constructor
function person(name,birthMonth,profession){
//set default values to a person
this.name = name || "No Name";
this.birthMonth = birthMonth || "No Month";
this.profession = profession || "Nobody";

    //construction of the display function
    this.display=function (){
        msg.innerHTML += "<center><p>" + this.name + " " + "was born on " + this.birthMonth + " and they are a " + this.profession + ". "

                //Month comparisons
                if (this.birthMonth=="April"){
                    msg.innerHTML += "They are meh because they were born in April.(eww)"
                }
                else if (this.birthMonth=="January"){
                    msg.innerHTML += "They are the best because they were born in the <strong>best month!</strong>"
                }
                else {
                    msg.innerHTML += "They are okay, at best."
                }
        //close paragraph tag       
        msg.innerHTML += "<hr></p></center>"
    }

}

Question: Why isn't the msg.innerHTML inside of the if/else statements centered? Shouldn't the center tags catch them? In the HTML output, the first statements before the if/else is centered. Also, the hr prints correctly, so I am confident is it outputting that as well.

Thanks!

Answer 1

The browser is automatically closing the center tag when the first innerHTML is called.

Build up a string variable with the full message, then set the innerHTML at the end - as you close the center tag, the browser will not need to do anything and your text will render as you require.

this.display=function (){
var mess = '';
    mess += "<center><p>" + this.name + " " + "was born on " + this.birthMonth + " and they are a " + this.profession + ". "

            //Month comparisons
            if (this.birthMonth=="April"){
               mess += "They are meh because they were born in April.(eww)"
            }
            else if (this.birthMonth=="January"){
                mess += "They are the best because they were born in the <strong>best month!</strong>"
            }
            else {
                mess += "They are okay, at best."
            }
    //close paragraph tag     
    mess += "<hr></p></center>"
    msg.innerHTML = mess;
}

Answer 2

"The tag is not supported in HTML5. Use CSS instead." Use text-align: center; instead.

Answer 3

Using document fragments and CSS provide faster responses

 var msg = document.getElementById("message"); //constructor function person(name, birthMonth, profession) { //set default values to a person this.name = name || "No Name"; this.birthMonth = birthMonth || "No Month"; this.profession = profession || "Nobody"; //construction of the display function this.display = function() { var frag = document.createDocumentFragment(); var para = frag.appendChild(document.createElement("p")); para.className = "message"; para.appendChild(document.createTextNode(this.name + " " + "was born on " + this.birthMonth + " and they are a " + this.profession + ". ")); //Month comparisons if (this.birthMonth == "April") { para.appendChild(document.createTextNode("They are meh because they were born in April. (eww)")); } else if (this.birthMonth == "January") { para.appendChild(document.createTextNode("They are the best because they were born in the best month! ")); var strong = para.appendChild(document.createElement("strong")); strong.textContent = "best month!"; } else { para.appendChild(document.createTextNode("They are okay, at best.")); } msg.appendChild(frag); }; } var test1 = new person("Bob", "April", "Developer"); test1.display(); var test2 = new person("Bobby", "January", "Developer"); test2.display(); var test3 = new person("Rob", "else", "Developer"); test3.display(); 

 .message { text-align: center; } 

 <div id="message"></div>