jQuery .append() after offset

Question

I have this:

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

I would like to add this: <span> with an offset.

So when I for example would have the JS function: addSpan(4) this would happen:
<div id="testcase">abcd<span>efghijklmnopqrstuvwxyz</div>

To visualise what I'm looking for:

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

Answer 1

Use slice and 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

Here another wut i tired 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);
});

but i think Steini's answers was better