replacing href with user input in real time

I've got some code that replaces some paragraph text as the user types, allowing them to see what a domain name would look like if they chose a certain username.

what i now need to do is replace a href="#" with a href="whatever the user inputs" - also in real time.

here is the code i have so far

<script type="text/javascript">
function changeText2(){
	var userInput = document.getElementById('userInput').value;
	document.getElementById('boldStuff2').innerHTML = userInput;
	[COLOR="Red"]document.getElementById('urlchange').innerHTML = '<a class=&quot;lbOn&quot; href=check_username.cfm?username=' + userInput + ' class=&quot;lbOn&quot;>Check</a>'[/COLOR];
}
</script>
<p>http://openbrief.org/members/<b id='boldStuff2'>username</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' onKeyUp="changeText2()" />
<p id="urlchange"><a class="lbOn" href="check_username.cfm?username=[COLOR="green"]javascript:changetext2(userInput)[/COLOR]" >Check</a></p>

Code (markup):

as you can see there are two methods here, neither of which work.

the first method, in red, tries to rewrite the url, but it wont read the class="lbOn" (which is needed to activate lightbox)

so ideally i just want to replace the href which is what im trying to do in the green code, but ive no idea what the right code would be as i've no javascript knowledge. also i guess this might not update in real time, which is essential.

any ideas? thanks