This page demonstrates how to dynamically replace content in a DIV block with programmatically active, and trackable, checkboxes (with some minor changes it could be something other than checkboxes). If you are interested in seeing how to highlight text instead, please see the "jsTextElementSearch" javascript from the main javascript menu. Otherwise, explore the demo below for content replacement and feel free to download the source code (jsFilterTxtReplace.zip).
Content to change is referenced from here. The tag set "<b>change</b>" change will be swapped out with a checkbox. If there is more than one change all instances are replaced and are individually trackable. In this case there are two instances. Once the content has been changed check the checkboxes to demonstrate how they may be tracked.
HTML Code:
<div id="contentToChange" style="border-style: solid; border-width: 1px; border-color: blue; padding: 2px 2px 2px 2px; margin-bottom: 3px;">Content to change is referenced from here. The tag set "<b>change</b>" <b>change</b> will be swapped out with a checkbox. If there is more than one <b>change</b> all instances are replaced and are individually trackable. In this case there are two instances. Once the content has been changed check the checkboxes to demonstrate how they may be tracked.</div>
<input type="button" id="changeContent" value="Change Content" onclick="jsFilterStart();" />
<input type="button" id="showSubstitution" value="Show Inserted Code" onclick="jsFilterShow();" />
<input type="button" id="restoreContent" value="Restore Content" onclick="jsFilterRestore();" />
