使用JavaScript在div中的位置'x'处插入文本

Question

I'm trying modify my <div> on the fly. I have (start) position and text. I must insert text at this position.

date = {
    position: 5,
    text: 'nice'
}

<div class="something">I like cookies</div>

Do you have any idea how it do without substring() or substr().

Answer 1

How about using slice() ?

date = {
    position: 7,
    text: 'nice '
}

var elem = document.getElementsByClassName('something')[0],
    txt  = elem.innerHTML;
    _txt = txt.slice(0, date.position) + date.text + txt.slice(date.position, txt.length);

elem.innerHTML = _txt;

FIDDLE

Answer 2

var data = {
        text: 'nice',
        position: 5
    },
    element1 = document.getElementsByClassName("something")[0],
    str1 = element1.innerHTML, //assume you can use getElementsByClassName; otherwise write a function for it.
    i,
    output = '';

for (i = 0; i < str1.length; i++) {
    if (i === data.position) {
        output += str1[i] + data.text;
    }
    output += str1[i]
}
element1.innerHTML = output;

Answer 3

How about with slice ?

"foo bar".slice(0, 3) == "foo"
"foo bar".slice(3)    == " bar"
"foo bar".slice(-3)   == "bar"
"foo bar".slice(-2)   == "ar"

So given your example you would end up with something like this:

var date = {
    position: 5,
    text: 'nice'
};

var foo = $('<div class="something">I like cookies</div>').text();
var bar = foo.slice(0, date.position) + date.text + foo.slice(date.position);