$('div').add_at_index(content, index) adds an element at a given index.

1 - add_at_index.js

// Works with Zepto/jQuery
$.fn.add_at_index = function(content, index) {
  if (index < 0) { index = 0 }

  this.each(function() {
    var $this = $(this)
    var $child = $this.children().eq(index)

    if ($child.length) { return $child.before(content) }
    $this.append(content)
  })
}

2 - example.js

$div = $('div')
$div.html('<i>1</i><i>3</i>')

$div.add_at_index('<i>2</i>', 1)
console.log($div.html()) // => <i>1</i><i>2</i><i>3</i>

$div.add_at_index('<i>999</i>', 999)
console.log($div.html()) // => <i>1</i><i>2</i><i>3</i><i>999</i>

$div.add_at_index('<i>-10</i>', -10)
console.log($div.html()) // => <i>-10</i><i>1</i><i>2</i><i>3</i><i>999</i>