How can I show an object at the location where I select text?

I want to create a CMS like wordpress. In my text editor I want the user to be able to create a hyperlink via a button click. But I don't want to show an alert but a div shown under the selected word/sentence in or over the text area. How do I get the location of the selected word?

I already tried to append a textnode to it like this:

window.getSelection().appendChild(document.createTextNode("testing"));

but I get an error, that .appendChild() is not a function.

$('#btnLink').click(function() {
   window.getSelection().appendChild(document.createTextNode("testing"));
})

I expect the textnode is appended to the selected word, but it doesnt work