CODEWITHSUNDEEP
javascriptjqueryhtml
user3562480
user3562480

Reputation: 51

Difference Between JQuery .html() method and Javascript .innerHTML = "<div> somediv </div>"?

I have done a fair bit of googling and looking at "you might not need jquery" but still haven't been able to figure out what is wrong.

I have a makeTable function that builds up a html string of elements to form a table. The function works great when I append the output table to the DOM using the Jquery .html method.

Here is the function: 

function drawTable () {
  var outputString = '';
  for(var i = 1; i <= 12; i++ ){
    outputString += "<tr>";
    for(var j = 1; j <= 12; j++) {
       outputString += "<td>" + i * j + "</>";
    }
    outputString += "</tr>";
  }
  $("#output").html(outputString);
}

drawTable();

However, when I don't use Jquery and I change $("#output").html(outputString); to document.getElementById('output').innerHTML(outputString); the table doesn't render on the page. I just get a single line of numbers. When I inspect the element, <tr> and <td> elements are not being rendered at all and I don't understand why.

I am confused. How should I render this table in plain JS? What am I not understanding about the innerHTML method ? The functions are identical, I am just changing the line where outputString is appended to the DOM and really don't understand why it is not rendering correctly when I attempt to do it in plain JS. Please enlighten me!

Upvotes: 0

Views: 1627

Answers (1)

Gregg Duncan
Gregg Duncan

Reputation: 2725

@Igor Raush was correct in his comment. You are mis-using the innerHtml. It is not a method that takes a paramenter. It's a property whose value must be directly set with an equal sign.

In plain javascript:

document.getElementById("output").innerHtml = outputString;

In jQuery:

$("#output").html(outputString);

Upvotes: 3

Related Questions