Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Clara Roldan
Clara Roldan
3,074 Points

Can I print the result of the buildList() function directly, without saving it to a variable?

I have tried:

print( buildList(correct) );

Where 'buildList()' is the function used to create the HTML for the list, and 'correct' is the array with the correct questions. But nothing prints to the page.

If I do as in the video and save everything to the html variable, and then print that variable, it works.

Can someone explain me why?

Alexander Davison
Alexander Davison
65,469 Points

You did it correct, but there no function called "print()". If you mean to print it out into the JavaScript console it would be this:

console.log( buildList(correct) );

if you mean to make an h1 element on the web browser:

document.write("<h1>" + buildList(correct) + "</h1>");

if you mean to make a pop-up window that says the message:

alert( buildList(correct) );

Hope it helps! ~xela888

1 Answer

Branden Dane
Branden Dane
7,000 Points
Branden Dane
Branden Dane
7,000 Points

xela888's answer is spot on. You use another method to dynamically add generated HTML elements to a page. Nice performance boost and not overly complicated. Create a document Fragment. Append the buildList(correct) to the document Fragment. Append the Document Fragment to the DOM. This stores the HTML in memory instead of directly modifying the DOM right on page download.

So: var docFrag = new documentFragment; var docBody = document.querySelector('body'); docFrag.appendChild(buildList(correct)); docBody.insertBefore(uiDocFrag, docBody.firstChild);

The positioning here of the document fragment is assuming you have nothing between your body tag.