Xander Luciano Xander Luciano - 5 months ago 16
jQuery Question

Why does appending a textarea only work with .text and not .val?

Slowly working up my javascript and jquery skills right now and I had been attempting to reset a textarea with .val('') and found that I could not append to it after I had reset it.

var console = $('#console');

function Initialize(data){
console.text(data);
};

function AddText(data){
console.append(data);
};

function clearConsole(){
console.val('');
};


Now if I change
console.text(data)
to
console.val(data)
then I cannot append at all, rather I can only set the value. Now I also know there are more methods of getting the text from the textarea, such as
.value()
, but I haven't messed around with that much because I got my code working by using
.text('')
instead of
.val('')


But I ran into some really strange behavior that is easier to just show instead of type out a description:



var ta, tb, tc;

$(document).ready(function() {
ta = $('#ta');
tb = $('#tb');
tc = $('#tc');
});

//first textarea
function AddText() {
if (ta.text()) {
ta.append(Math.random() + "\n");
} else {
ta.text(Math.random() + "\n");
}
};

function ClearText() {
ta.text('');
}

//second textarea
function AddVal() {
tb.append(Math.random() + "\n");
};

function ClearVal() {
tb.val('');
}

//third textarea
function AddVal2() {
if (tc.val()) {
tc.append(Math.random() + "\n");
alert('Append is being called, but not appending.');
} else {
tc.val(Math.random() + "\n");
}
};

function ClearVal2() {
tc.val('');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<p> Using .text to initialize the textarea allows .append and clearing</p>
<textarea readonly cols=50 rows=5 placeholder="First textarea : A" id="ta"></textarea>
<br>
<button type="button" id="AddText" onclick="AddText()">Add Text</button>
<button type="button" id="ClearText" onclick="ClearText()">Clear</button>
<br>
<p>Using .val to initialize the textarea does not allow .append after clearing</p>
<textarea readonly cols=50 rows=5 placeholder="Second textarea : B" id="tb"></textarea>
<br>
<button type="button" id="AddVal" onclick="AddVal()">Add Text</button>
<button type="button" id="ClearVal" onclick="ClearVal()">Clear</button>
<br>
<p>Using .val to initialize the textarea with the extra checks doesn't append at all.
<br>An alert is generated to show the append is called, but no appending occurs.</p>
<textarea readonly cols=50 rows=5 placeholder="Third textarea : C" id="tc"></textarea>
<br>
<button type="button" id="AddVal2" onclick="AddVal2()">Add Text</button>
<button type="button" id="ClearVal2" onclick="ClearVal2()">Clear</button>





Can someone explain to me this behavior and the best practice to use? Or is it all really the same and it's just up to preference? Thanks.

EDIT: Bonus jfiddle

Answer

I don't know why .append isn't allowed after .val but you shouldn't be using .append. .append is for appending elements not text.

.text is for setting the innerHTML and escaping that HTML so that it appears as plain text.

.val is what you should be using, even for textareas.

To append with .val, just do

$el.val($el.val() + "\nnew content");

Also, it should be noted that your choice of variable name, console, will hide global variable by the same name (lets you log to your F12 Developer Tools).