添加一个类来输入[文字] /删除以前的追加

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

相反的.append()，使用.text()，这台新的文本到div并删除以前的文字，并通过class属性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>

Answer 2

1.如果您想添加与<p>标签的ID完全相同的类，请使用以下代码：

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

否则你可以用：class = "learn"

2.You可以.text()

试试这里的代码：

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

如果你想保持“嗨”的文字，但它太只要你可以创建一个变量来保存它：

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

用于2的。