How can I print a JavaScript loop to an element by ID?

The same output I get in a console.log is not posting to the HTML div and I cannot figure out why.

I am expecting this array to print:

["Thief", "The Lion", "Harry Potter", "Lord of the Rings"]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

function Book() {
  // the constructor
}

var bookLength = myLibrary.length;


function addBookToLibrary() {
  for (var b = 0; b < bookLength; b++)
    console.log(myLibrary[b]);
    
  return myLibrary[b];
}

var labels = document.getElementById("myBooks").innerHTML;
labels = addBookToLibrary();

<!-- language: lang-html -->

<p>My list should be below</p>
<p id="myBooks"></p>

<!-- script src="script.js"></script -->

<!-- end snippet -->

A couple of issues in play:

1. Your labels variable is a copy of innerHTML's value, not a reference to it.

Your labels variable is not a reference to the source element's innerHTML. It is a copy of its value at the time you assigned it. So changing the value of labels does not affect the source element in any way whatsoever.

If you want to update the element's innerHTML you must assign it directly. (There are other ways to do this, but for the purposes of this question I'm focusing on what OP is trying to do.)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

document.querySelector('#myBooks').innerHTML = myLibrary.join('<br/>');

<!-- language: lang-html -->

<p>My list should be below</p>
<p id="myBooks"></p>

<!-- end snippet -->

2. You loop over the array to log them, then return undefined.

The reason your console.log(labels); call emits undefined is because your for loop advances b until it's the length of the array, and then you return myLibrary[b].

Javascript arrays are zero-indexed, meaning the first item is n[0] and the last item is at n[length - 1].

Because your b variable is equal to myLibrary.length when your for loop exits, myLibrary[b] is undefined, so that's what you see in the log.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const myLibrary = ["Thief", "The Lion", "Harry Potter", "Lord of the Rings"];

function addBook() {
  for(var b = 0; b < myLibrary.length; b++) {
  }
  console.log(b); // 4
  return myLibrary[b]; // myLibrary[4] === undefined;
}

addBook();

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const myLibrary = ["Theif", "The Lion", "Harry Potter", "Lord of the Rings"];

function Book() {
  // the constructor
}

var bookLength = myLibrary.length;
var outer = "";

var labels = document.getElementById("myBooks")
function addBookToLibrary() {
  for (var b = 0; b < bookLength; b++){
    labels.innerHTML += myLibrary[b] + "<br>"
    outer += myLibrary[b] + '\n'
    console.log(myLibrary[b]);
   } 
  return outer;
  
}


labels = addBookToLibrary();

console.log(labels);

<!-- language: lang-html -->

<p>My list should be below</p>
<p id="myBooks"></p>

<!-- script src="script.js"></script -->

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const myLibrary = ["Theif", "The Lion", "Harry Potter", "Lord of the Rings"];

function Book(){
    // the constructor
}

function addBookToLibrary(myLibrary) {
    var result = "";
    for (var library in myLibrary){
        console.log(myLibrary[library]);
        result += myLibrary[library] + "<br>";
    }
    return result
}


document.getElementById("myBooks").innerHTML = addBookToLibrary(myLibrary);

<!-- end snippet -->

The result I came to. I am confused why the return result worked but remembered i needed it from past lessons, i googled the <br>