JQuery .append() после смещения

Question

у меня есть это:

<div id="testcase">abcdefghijklmnopqrstuvwxyz</div>

Я хотел бы добавить следующее: <span> со смещением.

Так что, когда я, например, будет иметь функцию JS: addSpan(4) это произойдет:
<div id="testcase">abcd<span>efghijklmnopqrstuvwxyz</div>

Чтобы визуализировать то, что я ищу:

function addSpan(i){ 
    $('#testcase').append('<span>', i); 
} 

Answer 1

использования ломтиком и concatinate ...

function addSpan(i){ 
    var content = $("#testcase").html(); 
    var before = content.slice(0, i); 
    var after = content.slice(i + 1); 
    $("#testcase").html(before + "<span></span>" + after); 
} 

Answer 2

Вот еще один ВТУ я устал LIVE DEMO

$("#btn_clck").on('click', function() { 
    var gText = $("#testcase").html(); 
    var getlength = gText.length; 
    var finalValue = ""; 

    for (var i = 0; i < getlength; i++) { 
     var setData = gText.charAt(i); 
     if (i == 4) { 
      finalValue += '<span></span>' 
     } 
     finalValue += setData; 
    } 
    $("#testcase").text(finalValue); 
}); 

, но я думаю, что ответы Steini был лучше