jQuery インサート div as certain index

質問

これがあるとします。

<div id="controller">
 <div id="first">1</div>
 <div id="second>2</div>
</div>

というのは、新しい div をインデックスに基づいて任意に挿入したいとします。

挿入するインデックスに0を与えたとすると、結果はこうなるはずです。

<div id="controller">
  <div id="new">new</div>
  <div id="first">1</div>
  <div id="second">2</div>
</div>

で、挿入するインデックスを2にすると、結果はこうなります。

<div id="controller">
  <div id="first">1</div>
  <div id="second">2</div>
  <div id="new">new</div>
</div>

で、インデックスを1にすると結果はこうなります。

<div id="controller">
  <div id="first">1</div>
  <div id="new">new</div>
  <div id="second">2</div>
</div>

は、最後の例の書式は忘れてください。このサイトでHTMLコードをコピー＆ペーストするという単純な行為は、私が悲鳴をあげ、髪を引き抜くほど恐ろしいもので、これ以上それをいじることに時間を費やしたくはありません。

どのように解決するのですか?

0の扱いを少し良くした関数として。

function insertAtIndex(i) {
    if(i === 0) {
     $("#controller").prepend("<div>okay things</div>");        
     return;
    }


    $("#controller > div:nth-child(" + (i) + ")").after("<div>great things</div>");
}

編集：NaN エラーを避けるために、nth-child セレクタに括弧を追加しました。ホフナーウィリー

function insertAtIndex(i) {
  if(i === 0) {
    $("#controller").prepend("<div>okay things</div>");        
    return;
  }


  $("#controller > div:nth-child(" + (i) + ")").after("<div>great things</div>");
}

window.doInsert = function(){
  insertAtIndex(2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="controller">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
<button onclick="doInsert()">Insert "great things" at index 2.</button>