html - ¿Cómo agregar el <span> con javascript?

Posible duplicado:
¿Cómo usar Javascript para agregar/quitar el estilo CSS/color a la página HTML?

Tengo una pregunta sobre HTML y JavaScript. Tengo el siguiente párrafo.

function add_span(){
     // ??
}

<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>

¿Es posible obtener el siguiente resultado después del usuario?

1. selecciona el texto resaltado con el ratón
2. haz clic en el botón

p. ej.

1. resaltar el 'statement1,'
2. haz clic en el botón

Resultado esperado:

<input tupe="button" onclick="add_span()" value"add span"/>
<p> <span class="ABC">statement1,</span> statement2, statement3 </p>

// updated code in the add_span

    var selectedText;

    if (window.getSelection)
    {
        selectedText = window.getSelection();
    }
    else if (document.getSelection) // FireFox
    {
        selectedText = document.getSelection();
    }
    else if (document.selection)  // IE 6/7
    {
        selectedText = document.selection.createRange().text;
    }

    //create the DOM object
    var newSpan = document.createElement('span');
    // add the class to the 'spam'
    newSpan.setAttribute('class', 'ABC');
    document.getElementById('text').appendChild(newSpan);   
    var selectedTextNode = document.createTextNode(); 
    newSpan.appendChild(selectedTextNode);

Respuesta #1

Puedes obtener el texto seleccionado de la respuesta de @Pezhvak IMV:

var selectedText;
if (window.getSelection)
{
    selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
    selectedText = document.getSelection();
}
else if (document.selection)  // IE 6/7
{
    selectedText = document.selection.createRange().text;
}

Para agregar un elemento, tienes que crear un nodo DOM, establecer sus atributos y agregar el elemento:

1. Crear un nodo DOM:

   var newSpan = document.createElement('span');

2. Establecer la clase

   newSpan.setAttribute('class', 'ABC');

3. Agrega el span debajo del <p> (El <p> debería tener un id o algún mecanismo para identificarlo:

   <p id="text">

4. Agrega el <span> debajo del <p>

   document.getElementById('text').appendChild(newSpan);

5. Y establece el texto

   newSpan.innerHTML = selectedText;

También puedes usar createTextNode (alternativa para el paso 5)

var selectedTextNode = document.createTextNode(); 
newSpan.appendChild(selectedTextNode);

Respuesta #2

Para responder a parte de tu pregunta:

function getSelText() {
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection) // FireFox
    {
        txt = document.getSelection();
            }
    else if (document.selection)  // IE 6/7
    {
        txt = document.selection.createRange().text;
            }
    else return; document.aform.selectedtext.value =  txt; }