nateps/gist:1492197

## gistfile1.html
<!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>
	<!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>