javascript - 添加一个类到 input[text]/delete previous append

Question

$(document).ready(function(){
  $('button').click(function(){
    $('#learn').append($('input:text').val());
  });
});

#one{
  color=red;
}
input{
  color:red;
}
#learn{
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type='text' name='name' id='one'><br>
  <button>
    Press
  </button>
  <div>
  <p id='learn'>
    Hi 
  </p>
</div>

两个问题:

1. 如何将类 learn 添加到 input[text] 中HTML?
2. 每次我在 input [text] 中添加新内容并按下按钮时，它不会删除上次按下时附加的内容。如何修复？

Answer 1

使用 .text() 代替 .append()，它将新文本设置到 div 并删除以前的文本，并将类添加到通过类属性 class='learn' 输入:

$(document).ready(function(){
  $('button').click(function(){
    $('#learn').text("Hi " + $('input:text').val());
  });
});

#one{
  color=red;
}
input{
  color:red;
}
#learn{
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type='text' name='name' id='one' class='learn'><br>
  <button>
    Press
  </button>
  <div>
  <p id='learn'>
    
  </p>
</div>