JavaScript按data.length追加元素

我的项目中的append

元素有问题。我想实时显示

元素。但是我得到了多个

我有这样一个观点：

<div class="view"> 
    <p>Hello World!.</p>
</div>
<textarea></textarea>

问题是当我在文本区域

hello{{{name}{{id}}

中输入类似的内容时。当我检查它时，它显示如下

<div class="view"> 
    <p>hello 
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{id}}</span>
      <span>{{id}}</span>
    </p>
</div>
<textarea></textarea>

你好
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
{{id}
{{id}

如果我删除

{{id}}

，它将再次添加

{{{name}}

---

我想要的东西是实时的，比如当我清理胡子的时候。。它也将清除span

您必须清除每个

事件中
p
的内容

$('textarea').on('keyup', function(e) {
    $('.view p').html('')
    var checkMustaches = $(this).match(/\{{\w+\}}/g);
    if(checkMustaches && checkMustaches.length > 0){
        for(let i = 0; i < checkMustaches.length; i++){
           $('.view p').append('<span>'+checkMustaches[i]+'</span>')
         }
    }
});

$（'textarea'）。在（'keyup'，函数（e）上{
$（'.view p'）.html（''）
var checkMustaches=$（this.match（/\{{\w+\}}}/g）；
if（checkMustaches&&checkMustaches.length>0）{
for（设i=0；i
我已更正了您代码中的一些错误，并添加了代码以清除
span


$（'textarea'）。在（'keyup'，函数（e）上{
$（'.view p'）.html（“”）；
var checkMustaches=$（this.val（）.match（/\{\w+\}}/g）；
if（checkMustaches&&checkMustaches.length>0）{
for（设i=0；i

你好，世界

您是否删除了
.view
的内容？我认为在您的情况下，使用library:vue.js（用于动态生成html内容）会非常好。为什么您同时计算和追加内容？是的，但我想要的是，当我清除文本区域中的一个小胡子时，在我看来，这也很清楚@MEE@KamilKiełczewski我不能使用库，因为这只是一个虚拟的问题，我只想得到这个概念，然后将它应用到我的实际项目中
$('textarea').on('keyup', function(e) {
    $('.view p').html('')
    var checkMustaches = $(this).match(/\{{\w+\}}/g);
    if(checkMustaches && checkMustaches.length > 0){
        for(let i = 0; i < checkMustaches.length; i++){
           $('.view p').append('<span>'+checkMustaches[i]+'</span>')
         }
    }
});