javascript - 为什么附加文本区域只适用于 .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.text(data) 更改为 console.val(data) 那么我根本无法追加，而只能设置值。现在我也知道有更多的方法可以从文本区域获取文本，例如 .value()，但我并没有乱搞那么多，因为我的代码是通过使用 来工作的>.text('') 而不是 .val('')

但我遇到了一些非常奇怪的行为，这些行为更容易显示而不是输入描述:

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>

有人可以向我解释这种行为和使用的最佳实践吗？还是一切都一样，只是取决于偏好？谢谢。

编辑: Bonus jfiddle

Answer 1

我不知道为什么 .val 之后不允许使用 .append 但您不应该使用 .append。 .append 用于附加元素而不是文本。

.text 用于设置 innerHTML 并转义该 HTML，使其显示为纯文本。

.val 是你应该使用的，即使是文本区域也是如此。

要附加 .val，只需执行

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

另外，应该注意的是，您选择的变量名称 console 将隐藏同名的全局变量(让您登录到 F12 开发人员工具)。