问如何在JQuery中为所选文本添加<span>标签

EN

<p> My sample paragraph </p>

<style>
    span {color: red;}
</style>
<script type="text/javascript">

    function getSelectedText() {
        t = (document.all) ? document.selection.createRange().text : document.getSelection();
        return t;
    }

    $('body').mouseup(function(){
        var selection = getSelectedText();
        var selection_text = selection.toString();

        // How do I add a span around the selected text?

        var span = document.createElement('SPAN');
        span.textContent = selection_text;

        var range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(span);
    });

</script>