添加一個類來輸入[文字] /刪除以前的追加

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的。