How to push a node inside another node without lose the Initial writing(node,javascript)

For run code go HERE. The question is simply, The replace is wrong, i lost many character: why? I need to see the same writing as the beginning.

Code here:

window.onload = function(){
alert('now i am red');
var b = document.body,
p = document.createElement('p'),
print = document.getElementsByTagName('p')[0],
span = document.createElement('span'),
text = document.createTextNode('Thank you for the');
span.style.color = 'blue';

r = document.createRange();
s = document.getElementsByTagName('span')[0].firstChild;
r.setStart(s, 0);
r.setEnd(s, s.length);

var x = document.querySelectorAll("P");
var i;
var p_node = x[0].childNodes;
p.appendChild(p_node[0]);
span.appendChild(text);
p.appendChild(span);
p.appendChild(p_node[1]);
parentDiv = x[0].parentNode,
parentDiv.replaceChild(p, x[0]);

alert('now i am blue');

r = document.createRange();
s = document.getElementsByTagName('span')[0].firstChild;
r.setStart(s, 2);
r.setEnd(s, 9); 

window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
var content = r.extractContents(),
span = document.createElement('span');
span.style.color = 'green';
span.appendChild(content);

parentDiv = s.parentNode,
parentDiv.replaceChild(span, s);

var text = document.createTextNode('Where are gone \'Th  ...   for the\'? I need it.'),
p = document.createElement('p');
document.body.appendChild(text);

window.getSelection().removeAllRanges();
}

I hope you can help me. Thanks a lot.

via Helpme