Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects Accessing Object Properties

simpler form of the print function

I like this simpler form of the print function

function print(message) {

  document.getElementById("print").innerHTML = message;
}

anyone know the advantage of Daves way as he presents it in this video?

function print(message) {
  var div = document.getElementById("print");
  div.innerHTML = message;
}

5 Answers

Alec Plummer
Alec Plummer
15,181 Points

There is no advantage to doing it the second way unless you plan on using the variable div more than once in the function. For example;

// its much easier to define document.getElementById once
function print(message) {
    var div = document.getElementById("print");
    div.innerHTML = message;
    div.innerHTML += message.length;
    div.innerHTML += message.toUpperCase();
}

// or else you would be doing this...which would really suck!
function print(message) {
    document.getElementById("print").innerHTML = message;
    document.getElementById("print").innerHTML += message.length;
    document.getElementById("print").innerHTML += message.toUpperCase();
}

okay to print to the page

with a

<div id="print"></div>

and you want to change print to with the message data in that div. If you use jQuery not JavaScript

it will look something like: jQuery

    $('#print').innerHTML= message;

  or 
    var div = $('#print');
    div.innerHTML = message;

with JavaScript:

  document.getElementById('print').innerHTML = message;

 or  
   var div =  document.getElementById('print');
    div.innerHTML = message;

jquery $('#print'); far shorter

but

 document.getElementById("print").innerHTML = message;

works no advantage just that if the message location is to change you can separate the div location in the decalartion

Tonye, I'm picturing this. So we have an element with the id of print on the page. $("#print")something goes here I'm pretty sure, but I don't know what... Okay, so I took a peek at stack Overflow and now I'm not sure if you are referring to print to the page or print out like a printer?

$('#print').innerHTML= message; It's a mix of j Query and pure JavaScript? .innerHTML is a js thing? And thank you.

$("#display").text("Print to page, got it");

Thanks for taking the time to do explore this with me.

Sure anytime yeah js libraries have similarities and differences.