В первом случае
h1 в документе появился раньше, чем был вызван
console.log, во втором позже. Т.е. на момент вызова второго кода никакого
h1 ещё не существует. Javascript выполняется последовательно сразу как только получен, и если тег
script выше в тексте чем
h1, то код из
script выполнится уже тогда, когда
h1 ещё летит к вам по сети.
Соответственно надо либо дожидаться загрузки страницы (события
load или
DOMContentLoaded) или ставить тег
script в самом низу.
Если же ваш
h1 и вовсе добавляется динамически, то, соответственно, и изменения надо вносить в ту часть кода, что за это действие отвечает.
P.S. В консоли видны все значения потому, что
getElementsByTagName (в отличение от например
querySelectorAll) возвращает динамическую коллекцию, которая автоматически актуализируется, а когда вы смотрите в консоль страница уже полностью прогрузилась.
С этим, кстати, надо быть острожным, т.к. консоль сохраняет лишь примитивные значения (текст\число\булево), копии же объектов не делает оставляя только ссылку, а потому при логировании объекта вы увидите финальные значения на конец исполнения, а не значения на момент вызова
console.log.
P.P.S.
table[0].insertBefore(myNewElement, table.childNodes);
это не верно, т.к.:
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
// insertedElement Вставленный элемент.
// parentElement Родитель для нового элемента.
// newElement Элемент для вставки.
// referenceElement Элемент, перед которым будет вставлен newElement.
Как можно видеть
referenceElement - должен быть именно элементом, а не ещё одной коллекцией(
childNodes).
В вашем случае всё работает лишь из-за второй ошибки
:
table.childNodes у вас
undefined(т.е. не имеет значения), т.к.
table - это коллекция(т.е. подобие массива), у неё нет детей, дети бывают только у элементов. А вызов
insertBefore с
referenceElement, значение которого можно привести к
null, равносилен вызову
appendChild, т.е. простому добавление insertedElement в конец
parentElement.
