How could I mark a text in html format without deleting the content?

Question

Is there any way to put a tag in the type HTML, if I select a part of html with the mouse, where you have it focused, write a text [mark-open] and then at the end, [mark-close]:

<div id="container">
    <p>
    [mark->open]
    Meu texto estará aqui aberto<br>
    </p>
    <p>E ele será fechado no final com uma tag
    [mark-close]
    </p>
</div>

I know to open I can do the following:

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

  return t;
}

$(document).bind('mouseup','#container',function(){
    var selection = getSelectedText();
    var selection_text = selection.toString();

    var openTag = document.createTextNode('[mark->open]');

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

Fiddle

Now and to close? See that I don’t want to delete the content, nor convert the selected text to string.

Here is an example that needs to improve, on the question of the search.

Answer 1

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

  return t;
}

$(document).bind('mouseup','#container',function(){
    var selection = getSelectedText();
    var selection_text = selection.toString();

    var openTag = document.createTextNode('[mark->open]');
var closeTag = document.createTextNode('[mark->close]');

    var range = selection.getRangeAt(0);
    range.insertNode(openTag);
   var range2 = selection.getRangeAt(1);
    range.insertNode(closeTag);
});

I hope I help you, or else let me know .