The answer is
_x000D_
_x000D_
_x000D_
_x000D_
$('#input-field-id').val($('#input-field-id').val() + 'more text');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<input id="input-field-id" />If you are planning to use appending more then once, you might want to write a function:
//Append text to input element
function jQ_append(id_of_input, text){
var input_id = '#'+id_of_input;
$(input_id).val($(input_id).val() + text);
}
After you can just call it:
jQ_append('my_input_id', 'add this text');
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
*{
font-family: arial;
font-size: 15px;
}
</style>
</head>
<body>
<button id="more">More</button><br/><br/>
<div>
User Name : <input type="text" class="users"/><br/><br/>
</div>
<button id="btn_data">Send Data</button>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#more').on('click',function(x){
var textMore = "User Name : <input type='text' class='users'/><br/><br/>";
$("div").append(textMore);
});
$('#btn_data').on('click',function(x){
var users=$(".users");
$(users).each(function(i, e) {
console.log($(e).val());
});
})
});
</script>
</body>
</html>
Output
You are probably looking for val()
There are two options. Ayman's approach is the most simple, but I would add one extra note to it. You should really cache jQuery selections, there is no reason to call $("#input-field-id") twice:
var input = $( "#input-field-id" );
input.val( input.val() + "more text" );
The other option, .val() can also take a function as an argument. This has the advantange of easily working on multiple inputs:
$( "input" ).val( function( index, val ) {
return val + "more text";
});
_x000D_
_x000D_
_x000D_
_x000D_
// Define appendVal by extending JQuery_x000D_
$.fn.appendVal = function( TextToAppend ) {_x000D_
return $(this).val(_x000D_
$(this).val() + TextToAppend_x000D_
);_x000D_
};_x000D_
//______________________________________________x000D_
_x000D_
// And that's how to use it:_x000D_
$('#SomeID')_x000D_
.appendVal( 'This text was just added' )<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<form>_x000D_
<textarea _x000D_
id = "SomeID"_x000D_
value = "ValueText"_x000D_
type = "text"_x000D_
>Current NodeText_x000D_
</textarea>_x000D_
</form>Well when creating this example I somehow got a little confused. "ValueText" vs >Current NodeText< Isn't .val() supposed to run on the data of the value attribute? Anyway I and you me may clear up this sooner or later.
However the point for now is:
When working with form data use .val().
When dealing with the mostly read only data in between the tag use .text() or .append() to append text.
Source: Stackoverflow.com