Have to insert custom tag into HTML element at runtime?

See more:

Javascript

HTML

Scenario:

A table and or any other HTML elements are already present on the page with data in them. I should read the data from each element and wrap custom tags around the data which is of specific type.(This should be done on the onload event)

<table border="1"
id = "Table1">
<tr>
<td>CO@Property</td>
</tr>
<tr>
<td>Tag:Plugin@Property</td>
</tr>
</table>
<input id="UserTag1" type="text" value="Random1" style="text-align: right; width:50em">
<input id="UserTag2" type="text" value="Tag:Random1" style="text-align: right; width:50em">

Any data in any input field starting with "Tag:" should be enclosed in a Custom Tag

<CSTag InputType = "Tag" TagValue = "value the user entered" />

So After OnLoad the code should look like this:

<table border="1"
id = "Table1">
<tr>
<td>CO@Property</td>
</tr>
<tr>
<td><CSTag InputType = "Tag" TagValue = "Plugin@Property" /></td>
</tr>
</table>
<input id="UserTag1" type="text" value="Random1" style="text-align: right; width:50em">
<input id="UserTag2" type="text" value="<CSTag InputType = "Tag" TagValue = "Random1" />"style="text-align: right; width:50em">

How do i achieve this? I want to pull out user data of specific type and wrap them around tags.