テキストエリアを追加するのがなぜ.textでしかなく、.valではなく動作するのはなぜですか？

Question

遅く、私のjavascriptとjqueryのスキルアップをしています。私は.val（ ''）でテキストエリアをリセットしようとしていましたが、リセットした後に追加できませんでした。

var console = $('#console'); 

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

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

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

は今、私はその後、私はむしろ、私は唯一の値を設定することができ、全く追加することはできませんconsole.val(data)からconsole.text(data)を変更した場合。今、私はまた、このような.value()などのテキストエリアからテキストを取得するより多くの方法が、ありますけど、私が代わりに.val('')

の.text('')を使用して作業私のコードを得たので、私は多くのことを周りに混乱していないが、私はに走りましたちょうど示し代わりの説明アウト入力が容易になり、いくつかの本当に奇妙な行動：

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>

は、誰かが私には、この動作し、使用することがベストプラクティスを説明できますか？それとも、まったく同じですか、好みにしていますか？ありがとう。

EDIT：Bonus jfiddle

Answer 1

.appendが.valの後に許可されない理由はわかりませんが、.appendを使用しないでください。 .appendは、要素を付加するためのものではありません。

.textは、innerHTMLを設定し、そのHTMLをエスケープしてプレーンテキストとして表示するためのものです。

.valは、テキストエリアでも使用する必要があります。 .valを追加する

は、ちょうどまた

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

を行い、変数名の選択、console、（同じ名前でグローバル変数を非表示になりますが、あなたのF12にログインすることができますことに留意すべきです開発者ツール）。

Answer 2

入力は単一の値を持つHTMLフィールドです：

<input value='whatever' /> 

が、テキストエリアにはコンテンツがあります。

<textarea>this is the content that can be added to</textarea> 

だから緩くTEXTAREAがブロックであることを考えます追加できるテキストの入力は定義可能な変数です

Answer 3

あなたの追加は機能していますが、あなたはちょっと変わった気分のためにそれらを見ることができません。奇妙な点は、appendはtextプロパティを設定しますが、valをクリアするとtextは表示されなくなります。

console.log(tb.text(), tb.val())にAddVal()を追加すると、これを確認できます。同様のログを他の機能に追加すると便利です。

ここでは本当に興味深い質問はです。なぜがそのように機能するのですか。また、深い知識を持つ人に私が残しておく必要があることは間違いありません。