Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The following function will do it. DOM Level 2 Range objects make this easy in most browsers. In IE, you need to insert a marker element after the node you're inserting, move the selection to it and then remove it. </p> <p>Live example: <a href="http://jsfiddle.net/timdown/4N4ZD/" rel="noreferrer">http://jsfiddle.net/timdown/4N4ZD/</a></p> <p>Code:</p> <pre><code>function insertNodeAtCaret(node) { if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var range = sel.getRangeAt(0); range.collapse(false); range.insertNode(node); range = range.cloneRange(); range.selectNodeContents(node); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); } } else if (typeof document.selection != "undefined" &amp;&amp; document.selection.type != "Control") { var html = (node.nodeType == 1) ? node.outerHTML : node.data; var id = "marker_" + ("" + Math.random()).slice(2); html += '&lt;span id="' + id + '"&gt;&lt;/span&gt;'; var textRange = document.selection.createRange(); textRange.collapse(false); textRange.pasteHTML(html); var markerSpan = document.getElementById(id); textRange.moveToElementText(markerSpan); textRange.select(); markerSpan.parentNode.removeChild(markerSpan); } } </code></pre> <p>Alternatively, you could use my <a href="http://code.google.com/p/rangy/" rel="noreferrer">Rangy library</a>. The equivalent code there would be</p> <pre><code>function insertNodeAtCaret(node) { var sel = rangy.getSelection(); if (sel.rangeCount) { var range = sel.getRangeAt(0); range.collapse(false); range.insertNode(node); range.collapseAfter(node); sel.setSingleRange(range); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload