Вставить html-код после элемента с определенным id

[Globus]

Добрый день! Есть код

<div id="n">1</div>
<div id=z">2</div>

Пытаюсь сделать так, чтобы при открытии/загрузке страницы автоматически после блока с id="n" добавлялся еще один блок <div></div>.
В итоге получился примерно такой вариант и даже работает:

setTimeout(function() { document.getElementById("n").after('<div>00</div>'); }, 0);

Но на выходе получается так

1
<div>00</div>
2

То есть выводится не html а просто текст, а надо, чтобы html срабатывал и было так:

1
00
2

Подскажите, пожалуйста, как решить? Спасибо!

[Nexus]

https://learn.javascript.ru/modifyin...d-insertbefore

[Globus]

https://learn.javascript.ru/modifyin...d-insertbefore

Это как раз то, что мне нужно, спасибо! Только вариант выводит html после или перед элементом относительно его порядка, а не id.

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li id="nn">3</li>
  <li>4</li>
  <li>5</li>
</ol>

var newLi = document.createElement('li');
  newLi.innerHTML = 'Привет, мир!';

  list.insertBefore(newLi, list.children[1]);

Как можно обратиться к list.children[1] не по номеру, а по id?

[Artur_Hopf]

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="n">1</div>
<div id=z">2</div>

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li id="nn">3</li>
  <li>4</li>
  <li>5</li>
</ol>
<script>
$('#n').after(function() {
  return '<div>' + 123 + '</div>';
 });

$('#nn').after(function() {
  return '<li>Приветик</li>';
 });
</script>

[j0hnik]

list.insertBefore(newLi, list.querySelector('#nn'));

[Globus]

list.insertBefore(newLi, list.querySelector('#nn'));

Благодарю, оно самое!

[Globus]

Artur_Hopf, спасибо, тоже работает! Но искал на чистом js без jquery, как раз как подсказал j0hnik