Добавление элемента DOM путем изменения innerHtml div предотвращает его обнаружение позже с помощью getElementById?

У меня есть div, и я использую javascript, чтобы добавить в него новый элемент.

Оригинальный раздел:

<div id = "foo"></div>

JavaScript:

document.getElementById('foo').innerHTML  = "<div id='bar'></div>";

Результат

<div id = "foo">
  <div id = "bar"></div>
</div>

Но после выполнения этого кода я пытаюсь получить элемент (чтобы сосредоточиться на нем), делая

 document.getElementById('bar')

Но это возвращает пустой объект.

Итак, добавление элемента с помощью innerHtml на самом деле не добавляет элемент в DOM? И как правильно добавить элемент, который можно будет получить позже с помощью getElementById?