Help parsing one element for another via Javascript

Question

I have a variable to the button below that I would like to replace:

<script type="text/javascript">
  var btn = window.document.getElementById('btn_fb_1');
</script>
<button id="btn_fb_1" type="button">Log into Somewhere<br />(Joe Doe)</button>

Using the "btn" variable above, how to I replace the entire element with just text like this (notice I need to keep "Joe Doe":

Connected to Somewhere<br />(Joe Doe)

Answer 1

JavaScript frameworks make this a lot easier to do, but this should work.

btn.innerHTML = "Connected to Somewhere<br />(Joe Doe)";

Answer 2

If the button is wrapped in an object, change the innerHTML of the parent:

<span><button id="btn_fb_1" type="button">Log into Somewhere<br />(Joe Doe)</button></span>
<script type="text/javascript">
  var regEx = /\(([^)]*)\)/
  var btn = window.document.getElementById('btn_fb_1');
  btn.parentNode.innerHTML=btn.innerHTML.match(regEx)[1]; // extract joe doe (no error checking)
</script>

Answer 3

try this code:

var btn = window.document.getElementById('btn_fb_1');
var d = document.createElement('div');
var name = btn.innerHTML.match(/\(.*\)/);
d.innerHTML = 'Connected to Somewhere<br />'+name;
btn.parentNode.replaceChild(d, btn); // replace btn with d