Question

It would be possible to find the nearest element, and then replace it’s inner HTML, but there has to be a DOM way.

( e.g. mouseclicking on a text will call a function that inserts an element at the text’s position, pointed to by the mouse cursor.)

Is there some indexOf-like DOM function?

Answer 1

Read up on ranges.

• MDN Documentation
• MSDN Documentation

You’ll probably want to get an empty range at a given point in your text and use .insertNode() or .pasteHTML().

Edit: I tested this in Chrome and IE. Onclick sets the selection to an empty range where you clicked:

document.onclick = function(e)
{
    if (window.getSelection)
    {
        getSelection().getRangeAt(0).insertNode(document.createTextNode("x"));
    }
    else if (document.selection)
    {
        document.selection.createRange().pasteHTML("x");
    }
}

You may want to check the lenth of the selection and collapse the range if necessary to avoid overwriting the selected text.