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

Question

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!

innerHTML is not a getter/setter method like jQuery's .html(), it's a property of a DOM element. You need to assign outputString, e.g. element.innerHTML = outputString. — Igor Raush
– Igor Raush, Commented Dec 17, 2015 at 20:04
@IgorRaush Thanks, I changed the line to document.getElementById('output').innerHTML = outputString. I do not get any console errors. However - none of the '<tr></tr> or <td></td> elements render. When I inspect the element they are not there. All the page displays is a line of numbers. How can I get the table to display using pure JS? — user3562480
– user3562480, Commented Dec 17, 2015 at 22:39
@user3562480 Make sure that your element with id="output" is a <table>. See Plunker. — Igor Raush
– Igor Raush, Commented Dec 17, 2015 at 22:50
Thank you! That fixed. I would have never thought of that. I wonder, why it is necessary to use that specific tag with the JS version but not the JQuery one... weird. Thank you — user3562480
– user3562480, Commented Dec 18, 2015 at 0:05

Gregg Duncan · Accepted Answer · 2015-12-17 21:21:34Z

3

@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);

answered Dec 17, 2015 at 21:21

Gregg Duncan

2,7251 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3562480 Over a year ago

Hello, and thank you for your comments. However, my Problem is the same as before: None of the <tr></tr> or <td> </td> elements are rendered.

user3562480 Over a year ago

When I run this function :

user3562480 Over a year ago

user3562480 Over a year ago

when I run the above code and change the the line in question to document.getElementById('output').innerHTML = outputString. I do not get any errors, But the Table doesn't render. All that appears is a long string of numbers. When I inspect the element no '<tr></tr>' or '<td></td> ' elements are rendered. What is the problem with pure JS version ? n

Gregg Duncan Over a year ago

You're generating a table without table tags. So it's stripping out all the tr and td tags because there is no table tag to hold them. Check out this fiddle: jsfiddle.net/fedyfztp

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related