How can I get the element in which highlighted text is in?

Try something similar to this to get the dom element that contains the selected text.

window.getSelection().anchorNode.parentNode

It works on firefox and Chrome, you should test it into the remaining browsers.

It have a quirk, if you select text that beholds to more than an element, only the first one is returned. But maybe you can live with this.

Just for reference on what is the anchorNode property: http://help.dottoro.com/ljkstboe.php

On internet explorer this snippet should do the trick (I can't test it)

document.selection.createRange().parentElement();

as stated into http://msdn.microsoft.com/en-us/library/ms535872.aspx and http://msdn.microsoft.com/en-us/library/ms536654.aspx

A range explanation on quirksmode: http://www.quirksmode.org/dom/range_intro.html

You can do this relatively simply in all major browsers. Code is below, live example: http://jsfiddle.net/timdown/Q9VZT/

function getSelectionTextAndContainerElement() {
    var text = "", containerElement = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var node = sel.getRangeAt(0).commonAncestorContainer;
            containerElement = node.nodeType == 1 ? node : node.parentNode;
            text = sel.toString();
        }
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        containerElement = textRange.parentElement();
        text = textRange.text;
    }
    return {
        text: text,
        containerElement: containerElement
    };
}