javascript - 追加新的文本行而不使用 ".append"

Question

我有一个下拉列表，其中有 contacts ，即 John 、 Bob 等，旁边有一个按钮，单击该按钮时，它将在我的 <textarea></textarea> 中显示联系人的电话号码。

每次当我选择一个联系人并按下按钮时，我想在我的文本区域中显示该号码，并且我添加的每个其他联系人的号码我希望该号码显示在前一个号码的下方。所以基本上我需要像这样在每个数字之间换行。

1234567890

5557778888

当我使用 .append 使用第一个函数时，它按照我想要的方式工作，但是，如果我编辑数字或取出数字，我将无法再使用按钮将数字添加到文本区域。我从this SO article意识到这是因为文本节点和值可以断开连接。

然后我尝试使用 .val ，但这只是替换文本区域中的数字，而不是附加在其下方。

解决这个问题的最佳方法是什么？谢谢!

如果您需要任何其他信息，请告诉我。

我的 JavaScript 函数:

使用 .append()

    selectOption: function() {

        $('#addContact').click(function() {
            $('#toPhoneNumber').append($('#toAdd option:selected').data('number') + '
');

        });

    },

使用 .val()

    selectOption: function() {

        $('#addContact').click(function() {
            $('#toPhoneNumber').val($('#toAdd option:selected').data('number') + '\n');

        });

    },

Answer 1

var nums =[];
.
.
selectOption: function() {
  $('#addContact').click(function() {
    var num =$('#toAdd option:selected').data('number'); 
    if (nums.indexOf(num)==-1) nums.push(num);
    $('#toPhoneNumber').val(nums.join( '\n'));
  });
},