Display var on input field without using the value attribute - php

Question

I have a PHP variable which I am trying to get to appear onto an input field without using the 'value' attribute but I can't seem to get that to work.
I tried a jQuery code I found first to 'append' the variable to the input field but that didn't work.
var first_name = "<?php echo $current_user['first_name']; ?>";
alert(first_name);
$('#first_name').val($('#first_name').val() + first_name);
I then tried using getElementById but it also didn't work.
var first_name = "<?php echo $current_user['first_name']; ?>";
alert(first_name);
document.getElementById('first_name').value = first_name;
Any suggestions would be greatly appreciated!
EDIT:
This is the HTML form
<form name="personal_form" action="includes/editpersonal.php" method="POST">
<fieldset>
<legend><h2>Personal Details</h2></legend>
<table class="personalform">
<!--if there is an error on first name, the class name 'form_error_row' will be input into the following tr-->
<!--allows me to colourise the text field to indicate an error on this row-->
<tr class="<?php echo form_row_class("first_name") ?>" >
<th><label for="first_name"><p>First Name: </p></label></th>
<td>
<input type="text" name="first_name" id="first_name" size="40" />
<!--if there is an error it will print out a div with the error message-->
<?php echo error_for('first_name') ?>
</td>
</tr>
</table>
</fieldset>
<input type="submit" class="reg-button" value="Update Records" />
</form>

Answer 1

Try assigning value in document.ready to ensure html elements are ready for to be accessed by the script.
$(document).ready(function(){
$('#first_name').val($('#first_name').val() + first_name);
});