Skip to content

Instantly share code, notes, and snippets.

@nateps

nateps/gist:1492197

Created December 18, 2011 02:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nateps/1492197 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nateps/1492197 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nateps created this gist Dec 18, 2011.
    84 changes: 84 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    <!DOCTYPE html>
    <title></title>
    <style>
    body { font: 13px/normal arial; }
    table, form { margin: 10px; }
    th, td { border: 1px solid #aaa; padding: 2px 6px; }
    th { background: #eee; }
    #inputHtml { width: 250px; }
    </style>

    <form id="edit" onsubmit="return false">
    <label>
    Cells HTML:<br>
    <input id="inputHtml" value="<td>Sam<td>Sally">
    </label>
    <input type="submit" value="Replace">
    </form>

    <table>
    <tr>
    <th>Names</th>
    <!--0--><!--$0-->
    </tr>
    </table>

    <script>
    var markers = {};

    function inPage(node) {
    return !!(document.body.compareDocumentPosition(node) & 16);
    }

    function getRange(name) {
    var endName = '$' + name,
    start = markers[name],
    end = markers[endName],
    commentIterator, comment, range;

    // Find marker nodes if not cached already
    if (!start || !end) {
    // NodeFilter.SHOW_COMMENT == 128
    commentIterator = document.createNodeIterator(
    document.body, 128, null, false
    );
    while (comment = commentIterator.nextNode()) {
    markers[comment.data] = comment;
    }
    start = markers[name];
    end = markers[endName];
    if (!start || !end) return;
    }

    // Comment nodes may continue to exist even if they
    // have been removed from the page. Thus, make sure
    // they are still somewhere in the page body.
    if (!inPage(start) || !inPage(end)) {
    delete markers[name];
    delete markers[endName];
    return;
    }

    range = document.createRange();
    range.setStartAfter(start);
    range.setEndBefore(end);
    return range;
    }

    function rangeInner(name, html) {
    var range = getRange(name),
    fragment;

    if (!range) return;

    range.deleteContents();
    fragment = range.createContextualFragment(html);
    range.insertNode(fragment);
    }

    document.getElementById('edit')
    .addEventListener('submit', function() {
    var html = document.getElementById('inputHtml').value;
    rangeInner('0', html);
    }, false);
    </script>