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>

两个问题：

如何将课程learn添加到input[text]内 HTML？
每次我在input [text]中添加新内容并按下按钮时，它都不会删除最后一次按下时附加的内容。怎么解决？

Answer 1

而不是.append()，使用.text()，它为div设置新文本并删除以前的文本，并通过类属性class='learn'将类添加到输入中：< / p>

$(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>

Answer 2

1.如果您想要添加与<p>标记的ID完全相同的类，请使用此选项：

$('#one').addClass($('#learn').attr('id'));

否则您可以使用：class = "learn"

2.您可以尝试使用.text()

以下是代码：

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

如果你想保持＆＃34;嗨＆＃34;文字，但它太长了你可以创建一个变量来保存它：

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

JSFiddle 2。

添加一个类来输入[text] / delete previous append

2 个答案: