javascript - 如何向 append 元素添加函数

Question

我有一个输入文本。如果您输入某些内容，文本将显示在下面(请参阅代码片段)。

现在，我需要与上一步执行相同的操作:单击按钮(最好是复选框)来追加/删除所有内容。这是我失败的想法:DEMO (它会 append 输入文本，但是当您键入时，文本不会像我的代码片段中那样出现在下面)。

我觉得下面添加文本的功能不起作用，因为选择 append 元素时出现问题。我该怎么做？

任何更简单的想法来做到这一点都会很棒

var name1 = document.getElementById('name');

name1.addEventListener('input', function() {
  var result = document.querySelector('.X');
  
  console.log(this.value );
  result.innerHTML = this.value;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>What is your name? </label><input type="text" id="name">

<p>Your name is: <span class="X"></span></p>

Answer 1

单击添加按钮时，将代码片段的第一部分放入 append 逻辑中。正如在您的代码中一样，输入框在 append 其监听器后会 append 到文档。

if (!added) {
  $content =  $(NewContent).appendTo('.firstappend');
 
  // attach listener after input box actually exists!
  var name1 = document.getElementById('A');
  name1.addEventListener('input', function() {
    var result = document.querySelector('span.Y');
    console.log(this.value );
    result.innerHTML = this.value;
  });
}