Setting .innerHTML on a newly created TD element blank when content is returned from a function

Question

In short, why does the following function work where the latter function does not?

Working Code

function createRawRowElementViaInnnerHTML(){
  var row = document.createElement("tr");
  row.innerHTML = '<td>'+createDropDownHTML()+'</td>'+
    '<td>'+createTxtAreaDownHTML()+'</td>';
  return row;
}

Non-Working Code

function createRowElement(){
  var row = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML="Col 1 innerHTML -- should be overwritten";
  td1.innerHMTL=createDropDownHTML();
  var td2 = document.createElement("td");
  td2.innerHTML="Col 2 innerHTML -- should be overwritten";
  td2.innerHMTL=createTxtAreaDownHTML();
  row.appendChild(td1);
  row.appendChild(td2);
  return row;
}

I'd expect that creating the <td> elements and setting their .innerHTML would work the same as hard coding the table cell's inner html like such '<td>'+createDropDownHTML()+'</td>'. The "non-working code" produces the <tr> element with two <td> elements, but those <td> elements content are blank (for demo purposes I set their innerHTML to show they were created correctly). Behavior is observed on both FF32 and Chrome37.

Please see this fiddle for the remaining code (such as the function calls). Also, I attempted to use the new stack overflow code-snippet, this is the same code that can be found on the fiddle.

for(var i =0; i<5;i++){
    var r = createRowElement();
    document.getElementById("myTable").appendChild(r);
    var r2 = createRawRowElementViaInnnerHTML();
    document.getElementById("myTable").appendChild(r2);
}

function createRawRowElementViaInnnerHTML(){
    var row = document.createElement("tr");
    row.innerHTML = '<td>'+createDropDownHTML()+'</td>'+
    '<td>'+createTxtAreaDownHTML()+'</td>';
    return row;
}
function createRowElement(){
    var row = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML="Col 1 innerHTML -- should be overwritten";
    td1.innerHMTL=createDropDownHTML();
    var td2 = document.createElement("td");
    td2.innerHTML="Col 2 innerHTML -- should be overwritten";
    td2.innerHMTL=createTxtAreaDownHTML();
    row.appendChild(td1);
    row.appendChild(td2);
    return row;
}
function createDropDownHTML(){
    return '<select><option>1</option><option>2</option><option>3</option></select>';
}
function createTxtAreaDownHTML(){
    return '<textarea></textarea>';
}

<table id="myTable"></table>

Any Ideas? Most posts that came up from googling had to do with the dom not being ready, which isn't the case here. Also read a post about some form of potential html validation/clean-up, but I do not understand why it'd work one way and not the other since in both functions I am using .innerHTML on some level. Looking for an answer with documentation/resources as to why the latter function doesn't work. Thank you for your time.

Answer 1

function createRowElement(){
  var row = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML="Col 1 innerHTML -- should be overwritten";
  td1.innerHMTL=createDropDownHTML();  // should be HTML instead of HMTL
  var td2 = document.createElement("td"); 
  td2.innerHTML="Col 2 innerHTML -- should be overwritten";
  td2.innerHMTL=createTxtAreaDownHTML(); // should be HTML instead of HMTL
  row.appendChild(td1);
  row.appendChild(td2);
  return row;
}

As seen in the above comments, you should change those lines to:

// ...
td1.innerHTML = createDropDownHTML();
// ...
td2.innerHTML = createTxtAreaDownHTML();

In these cases usually its a problem of spellings and cases. All you need to do is have a sharp eye. The M and the T in the HTML are switched in your code.